为什么 flex:1 在 Chrome 和此处（片段）中超出了父空间，但在 Firefox 中却没有？

Question

我将我的问题减少到最低限度。画布（红色）不应超过其父空间（主体，蓝色），因为 flex:1 应该使其增加到剩余空间的大小，而不是在其之后。即使我使用 flex:1 1 auto（应包含 flex-shrink），它仍然无法在 Chrome 或此处工作（即红色矩形超出了蓝色矩形）。但它在 Firefox 中完美运行。

我在 Chrome 中看到的内容：

我在 Firefox 中看到的内容：

根据屏幕的大小，您必须更改 min-width 和 max-width 的值才能看到错误。

任何人都可以解释一下出了什么问题吗？

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);

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;
    min-width:500px;
    max-width:500px;
    min-height:0;
}
#cnv {
    flex:1 1 auto;
}

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

Answer 1

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);

body {
  width: 90%;
  border: 5px solid blue;
  margin: 0;
  display: flex;
  overflow: hidden;
}

nav {
  background: #99bb55;
  width: 500px;
}

#cnv {
  flex: 1;
}

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

为什么 flex:1 在 Chrome 和此处（片段）中超出了父空间，但在 Firefox 中却没有？

问题描述投票：0回答：1

1个回答

最新问题

为什么 flex:1 在 Chrome 和此处（片段）中超出了父空间，但在 Firefox 中却没有？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1