我正在尝试填充Flexbox中的弹性项的垂直空间。
.容器{高度：200px；宽度：500px；显示：柔性；弯曲方向：行；}.flex-1型{宽度：100px；背景色：蓝色；}.flex-2型{位置：相对；挠曲：1；背景色：红色；}.flex-2-儿童{高度：100%；宽度：100%；背景色：绿色；}<div class=“container”><div class=“flex-1”></div><div class=“flex-2”><div class=“flex-2-child”></div></div></div>
这是JSFiddle
flex-2-child不能达到要求的高度，以下两种情况除外：
flex-2的高度为100%（这很奇怪，因为默认情况下flex-2具有100%的高度，而且在Chrome中存在bug）flex-2-child具有绝对位置，这也不方便
这在Chrome或Firefox中目前不起作用。
当前回答
我在这里回答了一个类似的问题。
我知道你已经说过立场：绝对；虽然不方便，但它可以工作。有关修复调整大小问题的更多信息，请参见下文。
也可以看到这个jsFiddle演示，尽管我只添加了WebKit前缀，在Chrome中如此开放。
你基本上有两个问题，我将分别处理。
使弹性项的子项填充高度100%
设置位置：相对；在孩子的父母身上。设置位置：绝对；在孩子身上。然后可以根据需要设置宽度/高度（在我的示例中为100%）。
修复Chrome中的调整大小滚动“怪癖”
放置溢出-y：自动；在可滚动分区上。可滚动div必须指定显式高度。我的示例已经具有100%的高度，但如果尚未应用，则可以指定高度：0；
有关滚动问题的更多信息，请参阅此答案。
其他回答
.parent {
display: flex;
}
.child {
min-height: 100%;
}
.容器{. . . . 对齐项目：拉伸；. . . .}
有趣的事实：身高-100%在最新的铬合金中工作；但不是在狩猎中；
所以顺风的解决方案是
“弹性物品拉伸”
https://tailwindcss.com/docs/align-items
并递归地应用于孩子的孩子的孩子。。。
这是我使用css+的解决方案。
首先，如果第一个子项（flex-1）应该是100px，那么它不应该是flex。
事实上，在css+中，您可以设置灵活和/或静态元素（列或行），您的示例变得如此简单：
<div class="container">
<div class="EXTENDER">
<div class="COLS">
<div class="CELL _100px" style="background-color:blue">100px</div>
<div class="CELL _FLEX" style="background-color:red">flex</div>
</div>
</div>
</div>
容器CSS：
.container {
height: 200px;
width: 500px;
position: relative;
}
显然包括css+0.2内核。
这是小提琴。
使用对齐项目：拉伸
与David Storey的回答类似，我的解决方法是：
.flex-2 {
display: flex;
align-items: stretch;
}
请注意，高度：应从子组件中删除100%（请参见注释）。
或者，为了对齐项目，您可以仅在要拉伸的.flex-2-子项目上使用align self。
