我创建了一个简单的基于 flexbox 的页面，它可以在 Google Chrome(版本 44.0.2403.157)中正确呈现，但不能在 Safari(版本 8.0.2 (10600.2.5))中呈现。我已经添加了所有相关的前缀(我认为)并花了很多时间查看检查器，但我似乎没有找到问题的原因。
该页面由一个容器和两个 flex 行组成。第一个 flex 行(标题)的高度应该拉伸(stretch)以适应其内容。第二个 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>
内容框正确呈现，没有溢出:
呈现不正确，内容框溢出:
最佳答案
header 未扩展的原因是因为您在 .box .row.header 上指定了 flex-shrink: 1
通过说允许内容缩小，您是在让页眉被其下方的内容区域挤压。
改变这个:
.box .row.header {
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
对此:
.box .row.header {
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
您的页面现在可以在 Safari 中运行。
关于html - Safari flexbox 没有正确包含它的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32894387/