Question

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

该页面由一个容器和两个弹性行组成。第一个弹性行（标题）应该具有高度拉伸以适合其内容。第二个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>

使用没有溢出的内容框正确呈现

内容框溢出时呈现错误：

Answer 1

标题未展开的原因是您已在flex-shrink: 1

指定了.box .row.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未正确包含其元素

2 个答案: