在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:strett将第一个子级的高度设置为flex元素的innerheight,而不是其实际的可滚动高度。所以当你向下滚动时，红色背景会停在初始视区的底部。
高度:100%也有类似的问题（高度与父级的外部大小相对）。
通过引入另一个包装元素，并将overflow和height样式移到该元素，可以解决这一问题，但在我的情况下，由于其他原因，这会很尴尬。有没有什么方法可以让所有的flex儿童都一样（完全）身高而不这样做呢？
共有1个答案
使用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>-
问题内容： 我的页面结构为： 现在，DIV将具有更多内容，因此DIV的高度将根据子DIV的增加而增加。 但是问题是身高没有增加。如何使它的高度等于父代的高度？ 问题答案： 对于元素，添加以下属性： 然后针对这些：
-
问题内容： 我有一个具有以下结构的网站： 导航在左侧，内容div在右侧。内容div的信息是通过PHP获取的，因此每次都不同。 无论加载哪个页面，如何垂直缩放导航使其高度与内容div的高度相同？ 问题答案： 注意 ：此答案适用于不支持Flexbox标准的旧版浏览器。 我建议您看看使用Cross-Browser CSS和NoHacks的等高列。 基本上，以与浏览器兼容的方式使用CSS做到这一点并不是一
-
问题内容： 这是HTML： 这是CSS： 使用Chrome开发人员工具检查后，内部div的高度为0px。 我如何强制其为父div高度的100％？ 问题答案： 为了使高度基于其内容并基于其高度，使两个元素都绝对定位。 可以在css height属性的规范中找到更多详细信息，但本质上，如果的height为，则必须忽略height ， 除非_绝对定位。然后，高度将为0， _除非 将其自身绝对定位。 但是
-
问题内容： 我有这个HTML结构： 我想在主体部分（#body）中包含三个部分而不会溢出。因此，我需要在中间部分使用滚动条。 我尝试了这个CSS： 和这个： 但是它们都不起作用。 我在JSFiddle上做了一个例子。 我可以仅使用CSS和HTML来做到这一点吗？我宁愿避免使用Javascript。 问题答案： Flexbox是一种现代替代方案，可让您无需固定高度或JavaScript即可执行此操作
-
出于好奇，考虑到下面的示例，为什么在#container div上有边距会导致浏览器中出现垂直滚动条？容器的高度比设置为100%的车身高度小得多。 我已经将除了#容器之外的所有元素的填充和边距设置为0。注意，我故意省略了#container div上的绝对定位。在这种情况下，浏览器是如何计算身体的高度的，边距是如何影响它的？ JSFiddle上的示例
-
我试图理解我的意外行为： 容器中有一个最大高度为100%的元素，该容器也使用了最大高度，但意外的是，子元素溢出了父元素： 测试用例：http://jsfiddle.net/bq4Wu/16/ 但是，如果为父级指定了明确的高度，则这是固定的： 测试用例：http://jsfiddle.net/bq4Wu/17/ 有人知道第一个例子中孩子为什么不尊重父母的最大身高吗？为什么需要明确的高度？