在 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 会将第一个子元素的高度设置为 flex 元素的innerHeight，而不是它的实际可滚动高度。因此，当您向下滚动时，红色背景会停在初始视口的底部。

height: 100% 也有类似的问题（高度是相对于父母的外在大小）。

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

Answer 1

对于您的情况，是否可以选择使用 CSS 网格？

以下似乎可以满足您的要求：

<div style="
  display: grid;
  height: 150px;
  overflow: auto;
  grid-template-columns: min-content 1fr;
">
  <div style="background: red; width: 30px">1</div>
  <div style="background: yellow; height: 200px">hi</div>
</div>

Answer 2

你可以使用 flex wrap，但它显然会导致 wrapping。根据您的用例，您可能会也可能不会发现以其他方式解决这个问题更容易。

<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>

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

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