為什麼我的 Flexbox 在 Firefox 和 Chrome 48 中滾動不同，如何修復？

修復Firefox 和Chrome 48 中Flexbox 的渲染問題

簡介：
Flexbox，強大的佈局系統，可能會導致跨瀏覽器的不一致。這個問題解決了 Flexbox 在 Firefox 和 Chrome 48 中表現不同的渲染問題。

問題：
在 Chrome 47 中，具有 .scroll 類的 div 正確滾動，佔據 100%使用 Flex 的高度。然而，在 Firefox 中，相同的 div 使用內容高度並且無法正確滾動。

解決方案：
渲染行為的變化是由於 Flexbox 規範的更新所致，它將 Flex 項目的預設最小大小設為其內容的大小。要覆蓋此設定並確保跨瀏覽器相容性，您可以新增以下CSS 規則：

.content {
    min-height: 0;
    min-width: 0;
}

這將強制包含.scroll div 的.content div 的最小大小為零，允許其縮小以適應可用空間。

更新的 Chrome 行為：
最初，上述解決方案預計可在 Firefox 和 Chrome 48 中運行。然而，據報道 Chrome 48 已更新其渲染行為，現在在最小 Flex 大小方面模仿 Firefox。因此，上面提供的解決方案也應該可以解決 Chrome 48 中的問題。

以上是為什麼我的 Flexbox 在 Firefox 和 Chrome 48 中滾動不同，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！