时间戳

首页 > 解决方案 > 可以让子元素占据上一级父元素的 50% 吗？

html - 可以让子元素占据上一级父元素的 50% 吗？

问题描述

所以基本上我想在一行中有多个元素的画廊，直到该行被填满 - 然后它应该交换到下一行。

这一切正常，只是单个项目的父容器有 100% 的高度，所以孩子可以有 50% 的高度。结果是，底部的填充不可见，因为父容器不随其子容器一起增长：

#container { /* should not be touched */
  height: 200px;
  width: 400px;
  overflow: auto;
}

#inner-container {
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  
  background-color: green;
}

.element {
  height: 50%;
  min-width: 150px;
  
  flex-grow: 1;
  flex-basis: calc(50% - 5px);
  
  background-color: red;
}
<div id="container">
  <div id="inner-container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

我试过的：

min-height: 100%而不是height: 100%- 导致孩子们只取他们的内容高度：

#container {
  height: 200px;
  width: 400px;
  overflow: auto;
}

#inner-container {
  min-height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  
  background-color: green;
}

.element {
  height: 50%;
  min-width: 150px;
  
  flex-grow: 1;
  flex-basis: calc(50% - 5px);
  
  background-color: red;
}
<div id="container">
  <div id="inner-container">
    <div class="element">test</div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

remove height- 导致孩子们只取他们的内容高度：

#container {
  height: 200px;
  width: 400px;
  overflow: auto;
}

#inner-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  
  background-color: green;
}

.element {
  height: 50%;
  min-width: 150px;
  
  flex-grow: 1;
  flex-basis: calc(50% - 5px);
  
  background-color: red;
}
<div id="container">
  <div id="inner-container">
    <div class="element">test</div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

有没有办法让内部容器height: 100%，但如果需要，可以增长？还是直接height: auto让孩子拿50%的#container？

标签： htmlcssflexbox

解决方案

只需将溢出添加到内部容器中：

#container { /* should not be touched */
  height: 200px;
  width: 400px;
  overflow: auto;
}

#inner-container {
  height: 100%;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  
  background-color: green;
}

.element {
  height: 50%;
  min-width: 150px;
  
  flex-grow: 1;
  flex-basis: calc(50% - 5px);
  
  background-color: red;
}
<div id="container">
  <div id="inner-container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

推荐阅读