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