flexbox 列子级的高度 100% [重复]

Posted 2023-03-06

【中文标题】flexbox 列子级的高度 100% [重复]

【英文标题】：Height 100% on flexbox column child [duplicate]

【发布时间】：2014-01-24 10:12:48

【问题描述】：

我在使用 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% 不起作用？

【问题讨论】：

截至 2018 年 4 月 19 日，您的 CodePen 照常工作。

【参考方案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.

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

【讨论】：

如果结构嵌套很深，会发生什么情况——display:flex直到最后？

@Tushar 我的猜测是肯定的，但如果不深入研究我不会知道。 flexbox 的当前规范或 Chrome 上的实现也可能是这个问题的原因，因为这个答案是在 flexbox 还相对较新的时候发布的。

我已经阅读了规范，似乎 chrome 团队对段落的解释与我的不同。我不确定规范是否需要进行如此多的更改，是否需要澄清以消除这种有问题的解释的可能性。

我想补充一点，在.flex 上设置flex-basis: 1px 或flex: 1 1 1px 允许您在.flex-child 上使用height: 100%。现在什么可能是更好的选择 - display: flex 或 flex-basis: 1px？

当.flex-child 的内部内容高于其高度 时失败。不推荐此解决方案