為什麼「overflow-y」在具有嵌套 Flexbox 的 Firefox 中不起作用？

Overflow-y 無法在帶有嵌套Flexbox 的Firefox 中工作

許多Web 開發人員都熟悉Overflow-y 無法正常工作的問題在Firefox 中與嵌套Flexbox 佈局一起使用時。這可能是一個令人沮喪的問題，尤其是對於那些不熟悉 CSS3 複雜性的人來說。

問題源自於 Firefox 計算 Flex 專案最小大小的方式。預設情況下，彈性項目的大小會根據其子項的固有大小進行調整。但是，當 Flex 專案內的元素應用了 Overflow-y 時，Firefox 在計算最小大小時不會考慮這一點。因此，即使子元素具有可捲動內容，Flex 專案也無法縮小到其子元素的大小以下。

要解決此問題，需要停用 Flex 項目的預設最小大小調整行為。這可以透過將 min-height:0 屬性新增至父 Flex 專案來完成。例如，在提供的程式碼範例中，應將以下CSS 規則新增至.level-0-row2 類別：

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

新增此規則後，Firefox 將正確計算Flex 專案和Overflow-y 屬性將按預期工作。

透過了解此問題的根本原因並實作適當的 CSS 修復，Web 開發人員可以確保其巢狀的 Flexbox 佈局在 Firefox 和其他現代瀏覽器中正確運行瀏覽器。

以上是為什麼「overflow-y」在具有嵌套 Flexbox 的 Firefox 中不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！