Firefox 不尊重 Flex Shrink答案

【问题标题】：Firefox Not Respecting Flex ShrinkFirefox 不尊重 Flex Shrink
【发布时间】：2016-02-20 18:55:25
【问题描述】：

目标：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

谢谢！

【问题讨论】：

您的 Firefox 版本是什么？因为它确实在我的 Firefox 中工作

标签： css firefox flexbox

【解决方案1】：

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

Here's your demo with that change.

（旁注：Chrome 和 Firefox 在此处的行为不同的事实是 this bug 的一个实例。Chrome 在计算 flex 项的最小内在大小时遵循 img's 百分比最大宽度；Firefox 不是。如果您在 img 样式规则上删除 max-width:100%，那么您将看到 Chrome 更改其渲染以匹配 Firefox 并拒绝让徽标缩小，除非您添加 min-width:0。）

【讨论】：

这有助于在 flexbox 中使用 input 容器，谢谢。