为何flex:1在Chrome及代码片段中超出父容器，Firefox却正常？

我把问题简化成了最小复现示例：红色canvas元素本不该超出蓝色父容器body的范围，因为flex:1属性应该让它填充剩余空间而非溢出。即便用了包含flex-shrink的flex:1 1 auto，在Chrome里还是无效（红色矩形溢出蓝色容器），但Firefox里表现完全正常。

浏览器显示差异 #

• Chrome显示效果：
• Firefox显示效果：

注：根据屏幕尺寸，你可能需要调整min-width和max-width的值来复现问题。

复现代码 #

HTML

<body>
  <nav></nav>
  <canvas id='cnv'></canvas>
</body>

CSS

html {
    height:90%;
    width:90%;
    border:5px solid yellow;
}
body {
    height:90%;
    width:90%;
    border:5px solid blue;
    margin:0;
    display:flex;
    overflow:hidden;
    min-height:0;
}
nav {
    background:#99bb55;
    width:300px;
    flex-shrink:0;
    min-height:0;
}
#cnv {
    flex:1 1 auto;
}

JavaScript

var cnv,ctx;
cnv = document.getElementById('cnv');
ctx = cnv.getContext('2d');
W = cnv.offsetWidth;
H = cnv.offsetHeight;
cnv.width = W;
cnv.height = H;
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.strokeRect(0,0,W,H);
ctx.font = '18px sans-serif';
ctx.fillText(W,W/2,H/2);

问题原因 #

这是Chrome和Firefox对flex容器内替换元素（canvas属于替换元素）的尺寸计算逻辑差异导致的：

1. Firefox中，当flex项是替换元素时，flex:1 1 auto会正确让它基于容器剩余空间计算可用宽度，同时限制最大宽度不超过容器可用空间。
2. Chrome中，替换元素的intrinsic size（固有尺寸）会干扰flex布局计算：canvas默认固有宽高为300x150，通过JS设置cnv.width = W会改变它的固有宽度，但Chrome的flex布局未正确将这个动态修改的尺寸纳入约束，导致canvas实际宽度超出容器剩余空间。

可以给canvas添加max-width: 100%;强制它的宽度不超过父容器可用空间，就能让Chrome正确约束尺寸：

#cnv {
    flex:1 1 auto;
    max-width: 100%;
}

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