為什麼我的 Flexbox 佈局在 Firefox 33.x 和 34.x 之間會改變？

FF 34.x Flexbox 與FF 33.x 行為的差異

Firefox 34.x 或35.x 的使用者觀察到意外的Flexbox與Firefox 33.1 相比的行為。這種差異歸因於 Flexbox 規範中引入的更改，主要是添加了「Flex 項目的隱含最小大小」。

解決問題

恢復行為Firefox 33.x 在Firefox 34.x 中，最簡單的解決方案是應用以下CSS 樣式規則：

• { min-height:0 }

這將覆蓋「隱含的最小尺寸」並防止佈局增長超出視口。

具體用例

在原來的場景中，出現了佈局問題由於面向「列」的彈性容器內元素的特定組合。為了確保正確的行為，必須滿足以下條件：

• 將 min-height:0 加到每個子元素：

  • 是 a的後代以「列」為導向的彈性容器
  • 包含一個高的後代，需要Overflow

在像原始場景這樣的情況下，有多個嵌套的Flex 容器，可能需要對所有巢狀元素套用min-height:0。

以上是為什麼我的 Flexbox 佈局在 Firefox 33.x 和 34.x 之間會改變？的詳細內容。更多資訊請關注PHP中文網其他相關文章！