在 CSS flexbox 布局中，如果父级可垂直滚动，是否有办法将子块高度锁定到父（滚动）高度？

Question

如果我有这样的 HTML 结构：

<div style="display: flex; align-items: stretch; height: 150px; overflow: auto">
  <div style="background: red; width: 30px"></div>
  <div style="background: yellow; flex-grow: 2; height: 200px"></div>
</div>

在align-items: stretch将设置第一个孩子的身高在innerHeight柔性元素，而不是其实际的滚动高度。因此，当您向下滚动时，红色背景会停在初始视口的底部。

height: 100% 有一个类似的问题（高度是相对于父母的外尺寸）。

可以通过引入另一个包装元素并将overflow和height样式移动到该元素来解决此问题，但由于其他原因，在我的情况下这很尴尬。有没有办法让所有的 flex 孩子都具有相同的（完整的）高度而不这样做？

Answer 1

你可以使用flexwrapper，但它会明显造成包裹。根据您的用例，您可能会或可能不会发现通过其他方式解决这个问题更容易。

<div style="display: flex; flex-wrap: wrap; align-items: stretch; height: 150px; overflow: auto">
  <div style="background: red; width: 30px"></div>
  <div style="background: yellow; flex-grow: 2; height: 200px"></div>
</div>

此更改的要点是，对于非环绕柔性线，线的高度由父元素的高度给出（示例中为 150px），但对于环绕柔性线，将考虑子元素的高度（此处为 200 像素）。

每： https: //bugzilla.mozilla.org/show_bug.cgi? id=1267060