我在使用 flexbox 列时遇到问题，因为 flex 元素的子项不会以百分比响应 height。我只在 Chrome 中检查过这个，据我所知，这是一个仅限 Chrome 的问题。这是我的例子:
HTML
<div class='flexbox'>
<div class='flex'>
<div class='flex-child'></div>
</div>
<div class='static'></div>
</div>
CSS
.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;
display: flex;
flex-direction:column;
}
.flex{
background:blue;
flex:1;
}
.flex-child{
background:red;
height:100%;
width:100%;
display:block;
}
.static{
background:green;
width:100%;
height:5rem;
}
Here's the CodePen.
我想要它，所以红色 .flex-child 填充蓝色 .flex。为什么 height:100% 不起作用？
TL;DR: 设置 .flex至 display:flex , 并去掉 height:100%在 .flex-child . You can see the modified CodePen here.
为什么有效:
我从this similar question中学到了也就是说，根据 flexbox 规范，一个 align-self:stretch value(flex 元素的默认值)仅更改元素的 cross-size 属性(在本例中为 height)的已用值。然而，百分比是根据父级的交叉尺寸属性的指定值计算的，而不是它的使用值。如果你曾经打开你的 Inspector 并看到 height:100%在“样式”下但 height:1200px在“已计算”下，它会分别向您显示指定 和使用 值。
在这方面，Chrome 似乎完全遵循规范。这意味着设置 height:100%在 .flex-child表示指定的 height 的 100%的 .flex .因为我们没有指定 height在 .flex ，这意味着我们正在获取 100% 的默认值 height ，即 auto .看到为什么布局引擎变得困惑了吗？
设置.flex至 display:flex并删除 height:100%来自 .flex-child (这样它就不会一直尝试设置 100% 的 auto )将使 .flex-child填写所有.flex
当这不起作用时:
如果您只想填充 .flex 中的一部分，这将不起作用。 ， 前任。试图设置 .flex-child至 height:90% ，因为 flex child 意味着它将填满所有可用空间。我以为你可以用绝对定位来破解它，但这似乎也不起作用。你可以通过向 .flex 添加第二个 child 来破解我们称之为.spacer ，并设置 .spacer至 flex:1和 .flex-child至 flex:9 (一定要在 flex-direction:column 上也设置 .flex)。一个 hack，但我可以修复它的唯一方法。 Here's the CodePen.
但愿我们不必一直依赖它，他们只会更改规范以更符合预期。