web-dev-qa-db-ja.com

firefox overflow-yはネストされたflexboxで動作しません

Css3 flexboxで幅100％、高さ100％のレイアウトを設計しました。これはIE11（およびIE11のエミュレーションが正しい場合はおそらくIE10）の両方で動作します。

しかし、Firefox（35.0.1）、overflow-yは機能していません。このcodepenで見ることができるように： http://codepen.io/anon/pen/NPYVga

firefoxはオーバーフローを正しくレンダリングしていません。 1つのスクロールバーを表示します

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.level-0-container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; 
}
.level-0-row1 {
  border: 1px solid black;
  box-sizing: border-box;
}
.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.level-1-col1 {
  width: 20em;
  overflow-y: auto;
}
.level-1-col2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid blue;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.level-2-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px solid red;
  box-sizing: border-box;
  overflow-y: auto;
}
<html>
<body>

    <div class="level-0-container">

        <div class="level-0-row1">
            Header text
        </div>

        <div class="level-0-row2">

            <div class="level-1-col1">
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                line <br/>
                
            </div>

            <div class="level-1-col2">

                    <div class="level-2-row1">
                        Some text
                        <p/> Some text 2
                        <p/> Some text 3
                        <p/> 
                    </div>

                    <div class="level-2-row2">
                        <p>some text</p>
                        <p>some text</p> 
                        <p>some text</p> 
                        <p>some text</p>
                        <p>some text</p>
                        <p>some test</p>
                    </div> 
                </div>

        </div>

    </div>
</body>


</html>
css3firefoxoverflowflexbox
72
rekna

tl; dr：min-height:0ルールに.level-0-row2が必要です。 （ その修正を含むコードペンです 。）

より詳細な説明：

Flexアイテムは、子の固有サイズに基づいたデフォルトの最小サイズを確立します（子/子孫の「オーバーフロー」プロパティは考慮されません）。

フレックスアイテムのoverflow: [hidden|scroll|auto]insideを持つ要素を取得したら、その祖先フレックスアイテムmin-width:0（水平フレックスコンテナ内）を指定する必要があります）またはmin-height:0（垂直フレックスコンテナ内）、この最小サイズ設定動作を無効にします。そうしないと、フレックスアイテムは子の最小コンテンツサイズより小さく縮小することを拒否します。

これに噛まれたサイトの例については、 https://bugzilla.mozilla.org/show_bug.cgi?id=104352 をご覧ください。 （これは、この仕様テキストが実装された後、この種の問題によって壊れたサイトを追跡するためのメタバグにすぎないことに注意してください。実際にはFirefoxのバグではありません。）

これは、Chrome（少なくとも、この投稿の時点ではない））には表示されません この最小サイズ設定動作をまだ実装していない 。 （編集：Chromeはこの最小サイズ設定の動作を実装しましたが、それでも 場合によっては最小サイズを0に折りたたむ 。）

175
dholbert