Question

我们说我们有这个标记：

<div id="outer">
  <div id="middle">
    <div id="inner">
    </div>
  </div>
</div>

和这个css：

#outer {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 300px;
}

#middle {
  flex-grow: 1;
  background-color: beige;
}

#inner {
  background-color: black;
  height: 100%;
}

我希望内部div能够跨越整个300像素，因为它应该与中间的flex项目一样高，而后者又会填充其父项。

这是我在IE，Edge和Firefox上看到的行为。

在Chrome上，中间div仍然填充300像素，但内部div与没有任何高度属性的情况一样高。

看到这个小提琴：https://jsfiddle.net/mhjussna/

这是Chrome中的一个错误，对吧？

Answer 1

这是因为您只是在flex-grow:1 div上使用#middle。

如果您使用推荐的flex:1速记...它的效果非常好。

＆＃13;

#outer {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 300px;
}
#middle {
  flex: 1;
  /* here */
  background-color: beige;
}
#inner {
  background-color: black;
  height: 100%;
  color: white;
}

＆＃13;

<div id="outer">
  <div id="middle">
    <div id="inner">
      x
    </div>
  </div>
</div>

＆＃13;

或者，陈述所有弹性值

#middle {
  flex-grow: 1;
  flex-shrink:0;
  flex-basis:0;
  background-color: beige;
}

JSfiddle Demo

Answer 2

我认为这不是Chrome中的错误。

来自W3C建议https://www.w3.org/TR/CSS2/visudet.html#the-height-property：

指定百分比高度。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。

如果为#middle设置height: 100%，则会得到与其他浏览器https://jsfiddle.net/mhjussna/1/相同的结果。

父项是弹性项目时的100％高度：Chrome bug？

2 个答案: