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-child到height:90% ，因为弯曲孩子意味着它将填充所有可用的空间。 我认为你可以用绝对定位来破解它，但是这似乎也不起作用。 你可以通过添加第二个孩子到.flex ，我们将调用.spacer和设置.spacer到flex:1和.flex-child到flex:9 （一定要在.flex上设置flex-direction:column 。 ）。 黑客，但唯一的办法，我可以修复它。 这是CodePen。
希望我们不必一直依靠这一点，他们只是改变规范行事更多的预期。
