Safari flexbox 没有正确包含它的元素
Posted
技术标签:
【中文标题】Safari flexbox 没有正确包含它的元素【英文标题】：Safari flexbox does not contain its elements properly 【发布时间】：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 都没有解决问题。
在这种情况下，导致问题的不是高度百分比的使用，因为下面的答案仍然适用于百分比高度。
【参考方案1】：
这是旧版本 Safari 以及它们如何处理 flexbox 中的一个错误。在最新版本 10.0.1 中，此问题已得到修复。
【讨论】：
【参考方案2】：标题没有扩展的原因是因为您在.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 中运行了。
【讨论】：
nice :) 这是 FlexBug #1 的经典案例（解决方案）！ github.com/philipwalton/…以上是关于Safari flexbox 没有正确包含它的元素的主要内容，如果未能解决你的问题，请参考以下文章
带有图像的 flexbox 在 Safari 中无法正确查看