时间戳

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

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

问题描述

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

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

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

标签： htmlcssflexboxoverflow

解决方案

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

推荐阅读