高度100%在flexbox列子[重复]

Question

我在flexbox列中遇到了问题，flex元素的子元素对高度的响应不符合百分比。我只在Chrome中检查过这个，据我所知，这是Chrome唯一的问题。下面是我的例子：

超文本标记语言

<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;
}

这是代码笔。

我想要它，所以红色的。flex child填充蓝色。flex。为什么高度：100%不起作用？




Answer 1

匿名用户

TL； DR：将. flex设置为show： flex，并删除. flex-child上的高度： 100%。您可以在这里看到修改后的CodePen。

工作原理：

我从这个类似的问题中了解到，根据flexbox规范，align self:stretch值（flex'd元素的默认值）只更改元素的交叉大小属性的使用值（在本例中，height）。但是，百分比是根据父对象的“交叉大小”属性的指定值计算的，而不是它的“已使用”值。如果您打开检查器，在“样式”下查看高度：100%，但在“计算”下查看高度：1200px，则分别显示指定值和使用值。

在这方面，铬合金似乎符合T形三通的规格。这意味着在上设置高度：100%。柔性子项表示指定的高度的100%。flex。因为我们没有在上指定高度。flex，这意味着我们获得了默认高度的100%，即自动。查看布局引擎为何变得混乱？

设置。flex到显示：flex并从中删除高度：100%。flex child（这样它就不会一直尝试将自动设置为100%）将使。弹性子项填充所有。flex

当这不起作用时：

如果您试图只填充. flex中的一些，例如。试图将. flex-child设置为高度： 90%，这将不起作用，因为灵活的子元素意味着它将填充所有可用的空间。我以为你可以用绝对定位破解它，但那似乎也不起作用。您可以通过添加第二个孩子到. flex，我们将其称为。间隔，并将。间隔设置为flex： 1和。flex-child设置为flex： 9（请务必在. flex上设置flex-方向：列。黑客攻击，但我唯一能修复它的方法。这是代码笔。

希望我们不必一直依赖于此，他们只需更改规范，使其更符合预期。