Flexbox列子组件的高度100％

Question

我对flexbox列的问题有疑问，因为flex'd组件的子组件不会以百分比响应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%工作？

Answer 1

TL; DR：设置.flex到display:flex，并获得.flex-child摆脱height:100%的。 You can see the modified CodePen here.

为什么它的工作原理：

我从this similar question了解到，根据Flexbox的规范，一个align-self:stretch值（默认为flex'd元素）只改变一个元素的使用值交叉大小的财产（在这种情况下，height）。然而，百分比是从母公司的交叉大小属性的指定值来计算的，而不是它的使用值。如果您打开Inspector并在“计算”下查看height:100%下的'Styles'，但看到height:1200px，则会显示指定的和分别使用的值。

看来Chrome在这方面遵循规范。这意味着在.flex-child上设置height:100%意味着指定height的.flex的100％。由于我们尚未在.flex上指定height，这意味着我们正在抓取100％的默认height，即auto。看看为什么布局引擎变得困惑？

设置.flex到display:flex和删除.flex-child的height:100%（所以它不会继续尝试设置的auto 100％）将使.flex-child填补所有的.flex

当这是行不通的：

如果您只想填充.flex的某些部分，例如：试图将.flex-child设置为height:90%，因为弯曲孩子意味着它将填充所有可用空间。我认为你可以用绝对定位来破解它，但这似乎也不起作用。您可以通过添加第二个孩子.flex，我们将.spacer，并将.spacer设置为flex:1和.flex-child到flex:9（确保在.flex上也设置flex-direction:column）来破解。黑客，但唯一的办法，我可以解决它。Here's the CodePen.

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