具有固定高度的flexbox内的子div，并且溢出自动不会动态设置其高度

Question

.container {
  display: flex;
  height: 200px;
  overflow: auto;
  border: 1px solid #000
}

.child {
  padding: 10px;
}

.child:nth-child(odd) {
  background-color: #c1c1c1
}

.box {
  background-color: red;
  width: 75px;
  height: 75px;
}

<div class="container">
  <div class="child">
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
  </div>
  <div class="child">
    <div class="box">
      Boxes
    </div>

  </div>
  <div class="child">
    <div class="box">
      Boxes
    </div>
    <div class="box">
      Boxes
    </div>
  </div>
</div>

当内容增加时，flexbox中的子div不会动态更改。附言父div具有自动溢出的固定高度。

如果任何孩子的身高增加，我希望所有孩子的身高都相同。请在这里找到代码：https://jsfiddle.net/v7tcar5n/3/

Answer 1

您需要去掉容器的高度，因为默认为align-items: stretch flex，您将获得所需的结果。

.container{
display:flex;
overflow:auto;
border:1px solid #000;
}

使用'stretch'项目将被拉伸以适合容器。