Flexbox列子项上的高度为100%

我在Flexbox列中遇到了问题,因为flex'd元素的子元素不以百分比forms响应height 。 我只在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; } 

这是CodePen。

我想要它,红色的.flex-child填充蓝色的.flex 。 为什么不height:100%工作?

TL; DR:.flex设置为display:flex ,并且删除.flex-child上的height:100% 。 你可以在这里看到修改过的CodePen。

为什么它的作品:

我从这个相似的问题中学到,根据flexbox规范, align-self:stretch值(flex'd元素的默认值)仅更改元素的cross-size属性的使用值 (在本例中为height ) 。 但百分比是根据父级的跨尺寸属性的指定值计算的,而不是使用的值。 如果您打开Inspector并查看height:100% “样式”下的height:100% ,但“计算”下的height:1200px ,则分别显示指定的使用的值。

Chrome似乎在这方面遵循规范。 这意味着在.flex-child上设置height:100%意味着.flex指定height的100%。 由于我们没有在.flex上指定height ,这意味着我们抓取100%的默认height ,这是auto 。 看看为什么布局引擎变得困惑?

.flex设置为display:flex和从.flex-child删除height:100% (这样它不会继续尝试设置auto 100%)将使.flex-child填充.flex

当这不起作用时:

如果你.flex填充一些.flex ,例如: 试图设置.flex-childheight:90% ,因为弯曲孩子意味着它将填充所有可用的空间。 我认为你可以用绝对定位来破解它,但是这似乎也不起作用。 你可以通过添加第二个孩子到.flex ,我们将调用.spacer和设置.spacerflex:1.flex-childflex:9 (一定要在.flex上设置flex-direction:column 。 )。 黑客,但唯一的办法,我可以修复它。 这是CodePen。

希望我们不必一直依靠这一点,他们只是改变规范行事更多的预期。