如果我有一个像这样的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:strett将第一个子级的高度设置为flex元素的innerheight,而不是其实际的可滚动高度。所以当你向下滚动时，红色背景会停在初始视区的底部。
高度:100%也有类似的问题（高度与父级的外部大小相对）。
通过引入另一个包装元素，并将overflow和height样式移到该元素，可以解决这一问题，但在我的情况下，由于其他原因，这会很尴尬。有没有什么方法可以让所有的flex儿童都一样（完全）身高而不这样做呢？
使用CSS网格是否适合您的情况？
下面的内容似乎符合你的要求：
null
<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>