在包含的flexbox中设置100％的子div高度不起作用

Question

以下代码在FF中正确显示但在Chrome中执行时div'c'的高度似乎不知道100％的含义。谁知道为什么？

#flex {
  display: flex;
  align-self: stretch;
  flex-flow: column;
  height: 300px;
  width: 100%;
}
#a {
  order: 1;
  flex: 0 1 auto;
  background-color: red;
}
#b {
  order: 2;
  flex: 1 1 auto;
  background-color: blue;
}
#c {
  float: left;
  margin: 5px;
  width:-moz-calc(100% - 10px);
  width:-webkit-calc(100% - 10px);
  height:-webkit-calc(100% - 10px);
  height:-moz-calc(100% - 10px);
  background-color: yellow;
  overflow-y: scroll;
 }

<div id='flex'>
  <div id='a'>testa</div>
  <div id='b'>
   <div id='c'>test</div>
  </div>
</div>

这是附加到此问题的图像的jsfiddle页面：

https://jsfiddle.net/uya5sboy/

Answer 1

这是因为父级没有指定的高度。 Webkit浏览器更明确地遵守规范。在这种情况下，'percentage'指定此元素与其父元素相关的高度。如果父级没有明确指定的高度，则百分比值计算为“auto”（除非此元素的位置是绝对的）。

Answer 2

由于您已将高度300px设置为其父级，为什么不手动设置高度，而不是使用百分比设置高度？ https://jsfiddle.net/uya5sboy/4/

height: 272px;

Answer 3

前一段时间有这个问题。要解决此问题，只需将height:100%添加到父容器即可。

#b {
  order: 2;
  flex: 1 1 auto;
  background-color: blue;
  height: 100%;
}

jsfiddle：https://jsfiddle.net/uya5sboy/3/

虽然不是最好的解决方案，但它的工作原理非常简单。