通过处理动态添加子容器，使用Flexbox在相同的空间内垂直拉伸多个子容器

Question

我有一个带有display: flex和flex-direction: row的父容器。子容器在水平方向上拉伸良好。问题在于子容器可以动态增加，它们都需要完美地包含在“父”容器中，如下图所示：

第一种情况

第二种情况

在以上两张图片中，我通过分别将所有子容器的高度分别手动设置为50%和33.33%来处理这种情况（当子容器动态增加时， ）。而不是这样做，我希望flexbox处理它，并希望这是可能的。

代码如下：

Codepen（删除最后三个子容器，并将.child的高度设置为50%，以检查第一种情况）

Answer 1

包含大量文本的元素正引起您的注意，因为它的高度更大。解决这个问题的想法是使它的内容脱离流程，因此从技术上讲，所有元素都是空的，然后占用相同的空间。

检查下面的示例，我将第一种和第二种情况放在其中：

.parent {
  display: flex;
  background-color: yellow;
  height: 400px;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 20px;
}

.child{
 /* height: 33.33%;*/
}

.one{
  background-color: red;
  width: 33.33%;
}

.two{
  background-color: green;
  width: 33.33%;
}

.three{
  background-color: blue;
  width: 33.33%;
}

.four{
  background-color: cornflowerblue;
  width: 50%;
  position:relative;
}

.five{
  background-color: orange;
  width: 50%;
}

.four-wrapper{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  overflow: auto;
  display: flex;
  max-height: 100%;
}

<div class="parent">
  <div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
  <div class="child four">
    <div class="four-wrapper">
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      
    </div>
  </div>
  <div class="child five"></div>

<div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
</div>

<div class="parent">
  <div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
  <div class="child four">
    <div class="four-wrapper">
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      
    </div>
  </div>
  <div class="child five"></div>

</div>

要使其通用，可以将所有内容从所有元素内的流程中提取出来：

.parent {
  display: flex;
  background-color: yellow;
  height: 400px;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 20px;
}

.child{
 /* height: 33.33%;*/
 position:relative;
}
.child>* {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow:auto;
}

.one{
  background-color: red;
  width: 33.33%;
}

.two{
  background-color: green;
  width: 33.33%;
}

.three{
  background-color: blue;
  width: 33.33%;
}

.four{
  background-color: cornflowerblue;
  width: 50%;
}

.five{
  background-color: orange;
  width: 50%;
}

.four-wrapper{
  display: flex;
  max-height: 100%;
}

<div class="parent">
  <div class="child one">
  </div>
  <div class="child two">
    <div>
         a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
    </div>
  </div>
  <div class="child three">
  <div>
      b<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb<br>b<br>bbb
  </div>
  </div>
  <div class="child four">
    <div class="four-wrapper">
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      a
      <br>
      a a
      <br>
      a a
      
    </div>
  </div>
  <div class="child five"></div>

<div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
</div>