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

一尘不染

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

css

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

我想要它，以便红色.flex-child填充蓝色.flex。为什么不起作用height:100%？

阅读 975

2020-05-16

共1个答案

一尘不染

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。

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

2020-05-16