Question

目标：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的一个实例。当计算Flex项目的最小内在大小时，Chrome会尊重img's％的最大宽度; Firefox不是。如果你放弃max-width:100%样式规则的img，那么你会看到Chrome更改其渲染以匹配Firefox＆amp;拒绝让徽标缩小，除非你添加{{ 1}}。）

Firefox不尊重Flex Shrink

1 个答案: