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 元素的默认值）仅更改元素的交叉大小的 使用值属性（在本例中为height）。然而，百分比是根据父级的 cross-size 属性的指定值计算的，而不是它的使用值。如果您打开 Inspector 并在“样式”下看到height:100%，但在“计算”下看到height:1200px，那么这将分别向您显示指定和使用值。

Chrome 在这方面似乎遵循了规范。这意味着在.flex-child 上设置height:100% 意味着指定height 的.flex 的100%。由于我们没有在.flex 上指定height，这意味着我们正在获取默认height 的100%，即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.

希望我们不必一直依赖这个，他们只会更改规范以使其更加符合预期。