css - Firefox 不遵守 Flex 收缩

Question

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

.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 在计算 flex 元素的最小固有尺寸时尊重 img 的百分比最大宽度; Firefox 不是。如果您在 img 样式规则中删除 max-width:100%，那么您会看到 Chrome 更改其呈现以匹配 Firefox 并拒绝让 Logo 缩小，除非您添加 min-width:0。)