flexbox列子项的高度为100％[重复]

TL; DR： 设置

.flex

为

display:flex

，并摆脱

height:100%

on

.flex-child

。[您可以在此处查看修改后的CodePen。]

工作原理：

我从这个类似的问题中学到，根据flexbox规范，

align-self:stretch

值（flex’d元素的默认值）仅更改元素的cross-
size属性（在本例中为）的 使用值

height

。但是，百分比是根据父级的cross-size属性的 指定值
（而不是其使用值）计算的。如果您曾经打开过检查器，并

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

在我们称为的第二个孩子上添加

.spacer

，然后将设置

.spacer

为

flex:1

和

.flex-child

进行修改

flex:9

（一定也要设置

flex-direction:column

为

.flex

）。hack，但这是我可以解决的唯一方法。这是CodePen。

希望我们不必再依赖于此，他们只是将规范更改为按预期执行更多操作。