為什麼在具有嵌套 Flexbox 佈局的 Firefox 中，overflow-y 無法如預期般運作？

嵌套Flexbox 佈局的Firefox Overflow-Y 問題

在使用嵌套Flexbox 設計的100% 寬度和100% 高度佈局中，出現意外的情況在Firefox 中遇到的行為是，overflow-y 無法正常運作。

問題：

為什麼overflow-y 無法按照所提供的 CSS 程式碼按預期工作，導致Firefox 顯示不正確的滾動條？

答案：

此問題是由於 Flex 項目的預設最小大小調整行為造成的。 Flex 項目根據其子項的固有大小導出其最小大小，而不考慮應用於其後代的溢出-y。

當具有溢出-y: [hidden|scroll|auto] 的元素放置在Flex 項目中時，需要在相應的祖先Flex 項目上設定min-width:0 （對於水平Flex 容器）或min -height:0 （對於垂直Flex 容器）。這將停用預設的最小大小調整行為，從而允許 Flex 項目縮小到子項目的最小內容大小以下。

要解決此問題，請將min-height:0 加到.level-0-row2 規則中，如以下更新的CSS 程式碼所示：

<code class="css">.level-0-row2 {
  ...
  min-height: 0;
  flex: 1;
  border: 1px solid black;
  ...
}</code>

這確保. level-0-row2 彈性項目考慮其子項的溢出y 並允許其縮小到最小內容大小以下，從而啟用適當的Firefox 中的溢出行為。

以上是為什麼在具有嵌套 Flexbox 佈局的 Firefox 中，overflow-y 無法如預期般運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！