Firefox与Chrome的flex-shrink渲染差异：是否为浏览器Bug？

1. 这是浏览器对Flexbox规范的解读差异，Chrome存在逻辑偏差，Firefox符合规范 #

这种渲染差异本质上不是严重的"破坏性bug"，而是Chrome和Firefox对Flex容器可用空间计算的逻辑分歧。结合你的代码场景推测：navbar作为Flex子元素，默认继承了flex-shrink:1（Flex子元素的默认值），当页面存在全覆盖的position:fixed容器时：

• Firefox严格遵循CSS Flexbox规范：Flex容器的可用空间基于其自身包含块的尺寸计算，不会被fixed元素干扰，所以navbar不会被不必要地收缩。
• Chrome则错误地将fixed容器的尺寸纳入了Flex容器的空间计算，导致它误判可用空间不足，触发了navbar的默认收缩行为。

2. 相关Bug记录 #

Chromium的bug追踪系统中已有开发者上报过类似问题，核心描述是「Flex子元素在存在全屏fixed元素时，空间计算错误导致意外收缩」，目前该问题处于待修复状态（你可以在Chromium bug tracker中搜索关键词"flex shrink fixed position"找到相关记录）。

3. flex-shrink:0的方案在Bug修复后依然完全适用 #

放心用！这个属性的作用是强制Flex子元素不进行收缩，是完全符合CSS规范的声明。即使Chrome修复了这个计算逻辑，flex-shrink:0依然会生效——它只是明确告诉浏览器："这个元素的尺寸要保持我设定的值，别随便改"。

甚至可以说，这是一种防御性CSS的最佳实践：不管浏览器有没有布局引擎的小偏差，这个属性都能确保navbar的尺寸稳定，避免跨浏览器的布局意外。

附上你提供的简化代码片段（补全合理推测部分）：

#fixed { 
  position: fixed; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
} 
#tall { 
  height: 3000px; /* 推测完整代码中的长内容 */
}
/* 原navbar可能未设置flex-shrink */
.navbar {
  /* 添加flex-shrink:0即可解决Chrome中的收缩问题 */
  flex-shrink: 0;
}

内容的提问来源于stack exchange，提问作者Thejaka Maldeniya