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

Posted 2023-03-05

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

【英文标题】：In CSS flexbox layout, is there a way to lock child block height to parent (scroll) height if parent is vertically scrollable?在 CSS flexbox 布局中，如果父级可垂直滚动，是否有办法将子块高度锁定到父级（滚动）高度？

【发布时间】：2021-06-10 14:23:41

【问题描述】：

如果我有这样的 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 孩子都保持相同（完整）高度而不这样做？

【问题讨论】：

相关（可能重复）：***.com/q/45497031/3597276

【参考方案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>

【讨论】：

谢谢！不幸的是，我们在这个项目中仍然针对预网格浏览器，但很高兴知道至少使用网格这是可能的。

【参考方案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

【讨论】：

不错。在我的情况下似乎不可用，因为包装会破坏一切，但仍然很高兴知道。