入れ子になった Flexbox を備えた Firefox で「overflow-y」が機能しないのはなぜですか?

入れ子になった Flexbox を備えた Firefox で Overflow-y が動作しない

多くの Web 開発者は、overflow-y が正しく動作しない問題をよく知っています。 Firefox では、ネストされたフレックスボックス レイアウトとともに使用されます。これは、特に CSS3 の複雑さに慣れていない人にとって、解決するのが面倒な問題になる可能性があります。

この問題は、Firefox が flex 項目の最小サイズを計算する方法に起因します。デフォルトでは、フレックス項目のサイズは、その子の固有のサイズに基づいて設定されます。ただし、フレックス項目内の要素に overflow-y が適用されている場合、Firefox は最小サイズを計算するときにこれを考慮しません。その結果、子要素にスクロール可能なコンテンツがある場合でも、フレックス項目は子要素のサイズ未満に縮小できなくなります。

この問題を解決するには、フレックス項目のデフォルトの最小サイズ設定動作を無効にする必要があります。 。これを行うには、min-height:0 プロパティを親フレックス項目に追加します。たとえば、提供されているコード例では、次の CSS ルールを .level-0-row2 クラスに追加する必要があります:

<code class="css">.level-0-row2 {
  min-height: 0;
}</code>

このルールが追加されると、Firefox はファイルの最小サイズを正しく計算します。フレックス項目と overflow-y プロパティは期待通りに機能します。

この問題の根本的な原因を理解し、適切な CSS 修正を実装することで、Web 開発者はネストされたフレックスボックス レイアウトが Firefox やその他の最新のバージョンで正しく機能することを確認できます。ブラウザ。

以上が入れ子になった Flexbox を備えた Firefox で「overflow-y」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。