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

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

在Firefox 和Chrome 48 中，Flexbox滾動不同，導致下列問題內容。在 Chrome 47 中，具有 .scroll 類別的元素可以正確滾動並佔據其容器高度的 100%。然而，在 Firefox 中，這些元素會遵循其內容高度，無法充分捲動。

解決方案

此跨瀏覽器問題源自於Flexbox 規範的更新將Flex 專案的預設最小大小設為其內容的大小（最小寬度：自動/最小高度：自動）。要修正此問題，您可以使用以下CSS 覆蓋此設定：

.content {
    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

透過將min-height 和min-width 設定為0，您可以強制元素收縮包裹其內容，使它們能夠正確地在容器內滾動。

最近的開發

值得注意的是 Chrome 48 此後更新了其渲染行為以模仿 Firefox 的渲染行為。因此，上面提供的解決方案現在應該可以在 Firefox 和 Chrome 48 中運行。

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