web-dev-qa-db-ja.com

Safari flexboxにはその要素が適切に含まれていません

シンプルなflexboxベースのページを作成しました。これは、Google Chrome（バージョン44.0.2403.157）では正しくレンダリングされますが、Safari（バージョン8.0.2（バージョン8.0.2（ 10600.2.5））関連するプレフィックスをすべて追加し（私は思う）、インスペクターを調べるのに多くの時間を費やしましたが、問題の原因を見つけられなかったようです。

このページは、コンテナと2つのフレックス行で構成されています。最初のフレックス列（ヘッダー）は、コンテンツに合わせて高さを伸ばす必要があります。 2番目のフレックス行（コンテンツ）は、ブラウザーの高さからヘッダーの高さを引いた高さである必要があります。このコンテナーのオーバーフローはスクロールするように設定されています。コンテンツコンテナをスクロールする必要がない場合、コードは正常に機能しますが、コンテンツコンテナにオーバーフローが発生するとすぐに、ヘッダー行にコンテンツが含まれなくなります。何が原因でしょうか？

コード：

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

オーバーフローのないコンテンツボックスで適切にレンダリング：

enter image description here

コンテンツボックスにオーバーフローがあると正しくレンダリングされません：

enter image description here

htmlcsssafariflexbox
12
Alex Wetton

ヘッダーが展開されない理由は、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で機能するようになります。

17
ratherblue

これは、古いバージョンのSafariとそれらがflexboxを処理する方法のバグでした。最新バージョン10.0.1では、これは修正されています。

1
Michael Schultz