Firefox のネストされた要素に関するフレックスボックス オーバーフロー Y の問題
フレックスボックスを使用する CSS レイアウトで、ネストされた要素が親フレックスボックス内に含まれる場合item、overflow-y は Firefox で期待どおりに機能しない可能性があります。この問題は、特にネストされた要素に auto の overflow-y プロパティが指定されている場合に発生します。
問題の説明:
フレックスボックス項目は、固有の要素に基づいて最小サイズを自動的に計算します。子要素のサイズ。ただし、overflow-y などのオーバーフロー プロパティが適用された子要素がある場合、フレックス項目は、使用可能なスペースを超えた場合でも、子のコンテンツと同等の最小サイズを維持します。
解決策:
Firefox でこの問題を解決するには、親フレックス項目の min-height プロパティを明示的に 0 に設定する必要があります。これにより、デフォルトの最小サイズ変更動作が無効になり、フレックス項目を縮小できるようになります。
<code class="css">.parent-flex-item { min-height: 0; }</code>
この修正を適用すると、overflow-y:auto でネストされた要素は、コンテンツが利用可能な高さを超えたときに縮小してスクロールバーを表示できるようになります。
コード例:
次の HTML および CSS コードを考えてみましょう:
<code class="html"><div class="parent-flex-item"> <div class="nested-element"> <p>This is a long text that exceeds the available height.</p> </div> </div></code>
<code class="css">.parent-flex-item { display: flex; flex-direction: column; height: 100px; min-height: 0; } .nested-element { overflow-y: auto; }</code>
このコードでは、ネストされた要素にはFirefox のスクロールバー。ユーザーはオーバーフローしたコンテンツを表示できます。
以上が入れ子になった Flexbox 要素を含む Firefox で Overflow-Y が期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。