我正在尝试填充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中目前不起作用。
当前回答
我认为Chrome的行为更符合CSS规范（尽管它不那么直观）。根据Flexbox规范，align self属性的默认拉伸值仅更改元素的“交叉大小属性”（在本例中为高度）的使用值。而且，据我了解CSS2.1规范，百分比高度是根据父级高度的指定值计算的，而不是使用的值。父对象高度的指定值不受任何弹性财产的影响，仍然是自动的。
设置显式高度：100%可以正式计算孩子的身高百分比，就像将高度：100%设置为html可以计算CSS 2.1中身体的身高百分比一样。
其他回答
这是我使用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内核。
这是小提琴。
我自己找到了解决办法。假设您有以下CSS：
.parent {
align-items: center;
display: flex;
justify-content: center;
}
.child {
height: 100%; <- didn't work
}
在这种情况下，将高度设置为100%将不起作用，因此我将边距底部规则设置为自动，例如：
.child {
margin-bottom: auto;
}
子对象将与父对象的最顶端对齐。
如果您愿意，也可以使用对齐自规则：
.child {
align-self: flex-start;
}
如果我理解正确，您希望flex-2-child填充其父项的高度和宽度，以便红色区域被绿色完全覆盖？
如果是这样，您只需设置flex-2以使用Flexbox：
.flex-2 {
display: flex;
}
然后告诉flex-2-child变得灵活：
.flex-2-child {
flex: 1;
}
看见http://jsfiddle.net/2ZDuE/10/
原因是flex-2-child不是Flexbox项，但它的父项是。
.parent {
display: flex;
}
.child {
min-height: 100%;
}
有趣的事实：身高-100%在最新的铬合金中工作；但不是在狩猎中；
所以顺风的解决方案是
“弹性物品拉伸”
https://tailwindcss.com/docs/align-items
并递归地应用于孩子的孩子的孩子。。。
