为什么我的 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中文网其他相关文章！