css - 高度为 100% 的 div 不会填充使用 flex 定位的父级

Question

<分区>

Answer 1

我检查了你的 fiddle 。似乎在 Mac 上的 Firefox 47 中工作。您使用的是什么浏览器？

我 fork 了 fiddle 并更改了一些设置以确保它按预期运行，但它的工作原理是一样的。然而，在旧版本的 Safari 中，它在这里不起作用。也许尝试添加供应商前缀，看看是否有帮助？

检查这个link on CSS Tricks对于所有前缀。

fiddle

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
#header {
  height:30px;
  background-color: green;
}
#content {
  display:flex;
  flex-direction:column;
  flex:1;
  background-color: blue;
}
#content div {
  flex:1;
  height: 100%;
  background-color: red;
}