BinaryDevelop
  1. ホーム
  2. css

Firefox の overflow-y がネストしたフレックスボックスで機能しない

2023-10-20 13:49:41

質問

私はcss3 flexboxで幅100%高さ100%のレイアウトをデザインしました。これはIE11でも（IE11のエミュレーションが正しければおそらくIE10でも）動作します。

しかし、Firefox (35.0.1) では、overflow-y は機能しません。このコードペンを見ればわかるように、: 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>

どのように解決するのですか？

tl;dr: 次のものが必要です。 min-height:0 の中に .level-0-row2 のルールに従います。( 以下は、その修正を加えたコードペンです。 .)

より詳細な説明。

Flex アイテムは、その子の固有サイズ (子/子孫の "overflow" プロパティを考慮しない) に基づくデフォルトの最小サイズを確立します。

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

参照 https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 をご覧ください。(これは、この仕様テキストが実装された後、この種の問題によって壊れたサイトを追跡するための単なるメタバグであることに注意してください。）

Chrome ではこれが表示されません (少なくとも、この投稿の時点では表示されていません)。 はこの最小サイズの動作をまだ実装していないためです。 . (EDIT: Chrome は現在この最小サイズ動作を実装していますが、まだ が正しく 0 になる場合があります。 .)

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します