Firefox 中嵌套元素的Flexbox Overflow-Y 問題

在使用Flexbox 的CSS 佈局中，其中嵌套元素包含在父父Flexbox 中item、overflow-y 可能無法在Firefox 中如預期運作。當嵌套元素被賦予 auto 的overflow-y 屬性時，就會特別出現此問題。

問題說明：

Flexbox 專案根據內在的自動計算其最小尺寸他們的子元素的大小。但是，當存在應用了溢出屬性的子元素（例如overflow-y）時，Flex項目將保持與子元素內容相等的最小大小，即使它超出了可用空間。

解決方案:

要在 Firefox 中解決此問題，需要將父 Flex 專案的 min-height 屬性明確設定為 0。這將停用預設的最小大小調整行為並允許 Flex 項目縮小低於子層級的最小內容大小。

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

透過應用此修復，具有 Overflow-y: auto 的嵌套元素現在能夠在其內容超出可用高度時縮小並顯示捲軸。

程式碼範例:

考慮以下 HTML 和 CSS 程式碼：

  

    
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 中將有一個捲軸，允許使用者查看溢出的內容。