【发布时间】：2015-12-29 21:49:42
【问题描述】：
我创建了一个简单的基于 flexbox 的页面，它可以在 Google Chrome（版本 44.0.2403.157）中正确呈现，但不能在 Safari（版本 8.0.2 (10600.2.5)）中呈现。我已经添加了所有相关的前缀（我认为）并且花了很多时间查看检查器但我似乎没有找到问题的原因。
页面由一个容器和两个 flex 行组成。第一个 flex 行（标题）应该有它的高度拉伸以适应它的内容。第二个flex行（内容）的高度应该是浏览器高度减去标题高度，这个容器的溢出设置为滚动。当内容容器不必滚动时，代码可以正常工作，但只要内容容器有任何溢出，标题行就不再包含其内容。这可能是什么原因造成的？
守则：
<html>
<head>
<style>
.box {
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari 6 */
display: flex; /* Modern browsers */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
flex-flow: column;
height: 100%;
width: 100%;
border: 2px solid;
}
.box .row {
flex: 0 1 30px;
border: 2px solid;
width: 100%;
}
.box .row.header {
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
.box .row.content {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: scroll;
}
</style>
</head>
<body>
<div id="page-wrapper" style="height: 100%">
<div class="box">
<div class="row header">
<p>Header - The height of the header is based on the content</p>
<p>Header - The height of the header is based on the content</p>
</div> <!-- end of flex row header -->
<div class="row content">
<p>When the content box is full, the header row does not contain change its length to contain its content properly</p>
</div> <!-- end of flex row content -->
</div> <!-- end of flex box -->
</div> <!-- end of page wrapper -->
</body>
</html>
内容框正确渲染，没有溢出：
内容框溢出时渲染不正确：
【问题讨论】：
-
我记得，Safari 在处理
display: flex元素的子元素时，会以百分比表示高度值的问题。如果父母是一个百分比，那么有没有声明身高的孩子可能会导致他们继承相同的百分比值。 -
所以如果我希望父（框）始终填充整个页面高度，我应该如何在不使用百分比的情况下进行设置？
-
我无法在 Safari 上进行测试，因为我在 Windows 机器上，但您可以尝试
100vh使元素等于视口（屏幕）的高度。 -
我试过 100vh 和 100vw 都没有解决问题。
-
在这种情况下，导致问题的不是高度百分比的使用，因为下面的答案仍然适用于百分比高度。