我把问题缩小到最小。画布（红色）不应该超过它的父空间（主体，蓝色），因为flex：1应该使它增加到剩余空间的大小，而不是在它之后。即使我使用flex：1 1 auto，它应该包括flex-shrink，它仍然不能在Chrome或这里工作（即红色矩形超过蓝色矩形）。但它在Firefox中工作得很好。
我在Chrome中看到的：
x1c 0d1x的数据
在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;
width:300px;
flex-shrink:0;
min-height:0;
}
#cnv {
flex:1 1 auto;
}<body>
<nav></nav>
<canvas id='cnv'></canvas>
</body>
1条答案
按热度按时间wr98u20j1#
我认为问题的产生是因为如果你没有给予一个
canvas元素一个特定的宽度或高度，规范定义了一个默认的宽度（300像素）和高度（150像素）。这显然不同于常规的div，它没有默认的大小。我怀疑你需要用宽度和高度来样式化canvas，以覆盖这些默认值。对于构建两列布局，我也更喜欢网格而不是flexbox，特别是在希望子元素适合容器的情况下。