為什麼我的 Flexbox Scroll Div 在 Firefox 和 Chrome 中渲染不同，如何修復？

Firefox 和Chrome 中Flexbox 的跨瀏覽器渲染問題

Flexbox 佈局模型提供了一種直觀且高效的方法來處理元素定位和漿紗。但是，跨瀏覽器的渲染行為可能會出現不一致。

問題：.Scroll Div 中滾動不正確

在早期版本的 Chrome (47) 中，帶有 .Scroll 擴展名的元素。滾動類別使用 Flex 正確滾動，佔據 100% 高度。然而，在 Firefox 中，相同類別導致 div 僅使用內容高度，導致滾動行為不正確。

跨瀏覽器解決方案

解決此問題，必須覆寫 Flex 項目的預設最小大小。透過將min-width 和min-height 設為0，.scroll div 可以縮小以適應其內容，同時保持捲軸：

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

更新了Chrome 48 中的渲染行為

要注意的是，Chrome 48 採用了與Firefox 類似的渲染行為。因此，上面提供的解決方案現在應該可以在兩種瀏覽器中一致地工作。

其他資訊

Chrome 48 中的變更是為了與最新的 Flexbox 規範保持一致而實現的，預設最小寬度和最小高度為自動。這允許彈性項目的最小尺寸更合理。

有關更多詳細信息，請參閱參考答案中連結的規範和錯誤報告。

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