Firefox 不遵守 Flex 收缩

Question

目标： A nav，使用 flexbox，左侧有徽标，右侧有可变数量的 nav 项目。当 nav 项目变得足够宽而没有足够的空间容纳 nav 和徽标时，徽标会缩小。

.logo{
    display: flex; flex-shrink:1;flex-grow:0;
}
.nav-container{
    display: flex; flex-shrink:0;flex-grow:2;
}

问题： 它在 Chrome 中运行良好，但在 Firefox 中运行不佳。

尝试使用 flex-basis 但它创建了一个特定的比率并破坏了 Chrome 中的工作示例。

演示： http://codepen.io/leggomuhgreggo/pen/BobwYz

谢谢！

Answer 1

您需要将 min-width:0 添加到 .logo{} 规则中。这允许它缩小到其最小固有尺寸以下（Firefox 将其计算为 img 的固有宽度）。

Here's your demo with that change.

（旁注：Chrome 和 Firefox 在这里表现不同的事实是 this bug 的一个实例。Chrome 尊重 img's 百分比最大宽度，当计算 flex 项目的最小内在大小；Firefox 不是。如果你在 img 样式规则上删除 max-width:100%，那么你会看到 Chrome 更改其呈现以匹配 Firefox & 拒绝让徽标缩小，除非您添加 min-width:0.)

Firefox 不遵守 Flex 收缩

Firefox Not Respecting Flex Shrink

css

firefox

flexbox