为什么我的 Flexbox 元素在 Firefox 和 Chrome 48 中渲染不一致？

Firefox 和 Chrome 48 中 Flexbox 的跨浏览器渲染问题

背景

A最近对 Flexbox 规范的更新对 Flex 项目的默认最小大小进行了更改，以匹配内容大小。虽然 Chrome 47 正确实现了此更改，但 Chrome 48 和 Firefox 却出现了 Flexbox 元素渲染的问题。

问题

在 Firefox 中，某些 Flexbox 元素内容溢出行为出乎意料。虽然 Chrome 47 可以正确渲染这些元素，但 Chrome 48 现在可以匹配 Firefox 的行为。

解决方案

要解决此问题，您可以显式覆盖这些元素的默认最小大小使用以下 CSS 属性：

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

这可确保 Flexbox 元素可以正确缩小以适合其内容，从而解决渲染问题。

规范中的详细信息

Flexbox 规范指出：

“为了为 Flex 项目提供更合理的默认最小尺寸，该规范引入了一个新的 auto 值作为 min-width 和 min-height 属性的初始值CSS 2.1 中定义。”

对 Chrome 48 的影响

根据观察，Chrome 48 中 Flexbox 更新的最初实现模拟了 Firefox 的行为，导致类似的渲染问题。然而，后续报告表明 Chrome 48 已更新其渲染行为以匹配上面提供的解决方案。

结论

通过显式将 Flex 项目的最小大小设置为 0在两个方向上，您都可以有效解决 Firefox 和 Chrome 48 在处理溢出内容时遇到的渲染问题。

以上是为什么我的 Flexbox 元素在 Firefox 和 Chrome 48 中渲染不一致？的详细内容。更多信息请关注PHP中文网其他相关文章！