场景：
这是我的HTML。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id='textbox'>
<div id="sibling"></div>
<div id='canvasParent'>
<canvas id="myCanvas" style="border:1px solid #000000">
</canvas>
</div>
</div>
</body>
</html>
这里是相同的js。
function outputsize() {
console.log(canvasParent)
canvasParent.clientWidth = textbox.clientWidth - sibling.clientWidth;
myCanvas.width = canvasParent.clientWidth;
}
outputsize();
new ResizeObserver(outputsize).observe(textbox);
这里是css。
#textbox {
display:flex;
flex-direction:row;
border:1px solid green;
flex:1;
}
#sibling {
width:200px;
border:4px solid yellow;
}
#canvasParent {
border:2px solid red;
flex:1;
}
[第一个div具有2个子div，即sibling和canvasParent，同级具有固定宽度，而canvasParent将采用剩余宽度。目前，一旦我们减小窗口宽度，然后第一个div(sibling)减小其宽度，它的行为就不会达到预期的效果，而其他div的宽度是恒定的，而我希望同级div在用户减小窗口宽度时保持其固定宽度，并且另一个div缩小/增长。
这里是具有所描述的场景的具有css，js的同一个的JSBIN。
期望：
一旦我们调整窗口的大小，第一个div (sibling)将保持其固定宽度，并且其中一个内部包含画布的div将根据窗口调整大小而缩小/增长，并且内部的画布将采用其父宽度（画布的逻辑为将其父div已写入js文件。）
并且一旦我从第二个div中删除canvas元素，调整大小就可以了。JSBIN显示了一旦用户减小窗口宽度，第一个div保持固定宽度，另一个div缩小/增长。
您可以使用CSS Grid来获得效果：
#textbox {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 1fr;
grid-template-areas: ". .";
grid-column-gap: 10px;
}
#sibling {
background: red;
}
#canvasParent {
background: black;
}
#myCanvas {
width: 100%;
background: pink;
}<div id="textbox">
<div id="sibling"></div>
<div id="canvasParent">
<canvas id="myCanvas"></canvas>
</div>
</div>您可以在此处设计CSS网格：https://grid.layoutit.com/?id=2NkZ4JY