在 CSS flexbox 布局中，如果 parent 可垂直滚动，是否可以将 child 块高度锁定为 parent（滚动）高度？

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

height: 100%也有类似的问题（高度是相对于parent的外尺寸）

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

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>

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

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

在 CSS flexbox 布局中，如果 parent 可垂直滚动，是否可以将 child 块高度锁定为 parent（滚动）高度？

In CSS flexbox layout, is there a way to lock child block height to parent (scroll) height if parent is vertically scrollable?

html

css

overflow

flexbox