入れ子になった Flexbox 要素を含む Firefox で Overflow-Y が期待どおりに機能しないのはなぜですか?

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 サイトの他の関連記事を参照してください。