Safari flexbox 没有正确包含它的元素

Question

我创建了一个简单的基于 flexbox 的页面，它在 Google Chrome（版本 44.0.2403.157）中正确呈现，但在 Safari（版本 8.0.2 (10600.2.5)）中不正确.我已经添加了所有相关的前缀（我认为）并且花了很多时间查看检查器但我似乎没有找到问题的原因。

该页面由一个容器和两个弹性行组成。第一个 flex 行 (header) 的高度应该拉伸以适合其内容。第二个 flex 行（内容）的高度应该是浏览器高度减去 header 高度，这个容器的溢出设置为滚动。当内容容器不必滚动时，代码工作正常，但一旦内容容器溢出，header 行就不再包含其内容。可能是什么原因造成的？

代码：

<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>

正确呈现，内容框没有溢出：

渲染不正确，内容框溢出：

Answer 1

header 没有扩展的原因是因为您在 .box .row.header

上指定了 flex-shrink: 1

说允许内容缩小，就是让 header 被其下方的内容区域挤压。

改变这个：

.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 中运行。

Answer 2

这是旧版 Safari 及其处理 flexbox 的方式中的错误。在最新的10.0.1版本中，这个已经修复了。

Safari flexbox 没有正确包含它的元素

Safari flexbox does not contain its elements properly

html

css

safari

flexbox