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