Firefox のネストされた要素に関するフレックスボックス オーバーフロー Y の問題

フレックスボックスを使用する CSS レイアウトで、ネストされた要素が親フレックスボックス内に含まれる場合item、overflow-y は Firefox で期待どおりに機能しない可能性があります。この問題は、特にネストされた要素に auto.

の overflow-y プロパティが指定されている場合に発生します。

問題の説明:

Flexbox アイテムは、固有の要素に基づいて最小サイズを自動的に計算します。子要素のサイズ。ただし、overflow-y などのオーバーフロー プロパティが適用された子要素がある場合、フレックス項目は、使用可能なスペースを超えた場合でも、子のコンテンツと同等の最小サイズを維持します。

解決策:

.parent-flex-item {
  min-height: 0;
}

この修正を適用すると、overflow-y:auto でネストされた要素は、コンテンツが利用可能な高さを超えたときに縮小してスクロールバーを表示できるようになります。

コード例:

  

    
This is a long text that exceeds the available height.
  

.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}

このコードを使用すると、Firefox ではネストされた要素にスクロールバーが表示され、ユーザーはオーバーフローしたコンテンツを表示できるようになります。