具有固定高度和溢出自动的 flexbox 内的子 div 不会动态设置其高度答案

【问题标题】：Child divs inside a flexbox with fixed height and overflow auto does not set dynamically its height具有固定高度和溢出自动的 flexbox 内的子 div 不会动态设置其高度
【发布时间】：2020-05-06 14:52:43
【问题描述】：

.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 有一个固定的 hright 和溢出自动。

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

【问题讨论】：

你在问如何拥有一个固定高度的动态高度。你不能两者兼得，你需要选择一个或另一个。
考虑一个嵌套容器，你可以在其中应用 flexbox
添加嵌套容器对我有用。谢谢:)

标签： javascript html css flexbox css-grid

【解决方案1】：

你需要移除容器的高度，然后你会得到想要的结果，因为align-items: stretch flex 默认。

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

“拉伸”项目被拉伸以适应容器。

【讨论】：

但这是要求，我需要容器上的高度和滚动条。
这是正确的答案......如果你有一个固定的高度，你可以有动态的高度......