目标: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
谢谢!
最佳答案
您需要将 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。)
关于css - Firefox 不遵守 Flex 收缩，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33790219/