内部有 2 个 div 的 Flex 盒子一个内部有 canvas

Question

场景：

这是我的 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个childdiv即sibling和canvasParent，sibling有固定宽度，而canvasParent会占用剩余的宽度。目前，一旦我们减小 window 宽度，第一个 div(sibling) 正在减小其宽度，并且其他 div 的宽度不变，而我想要兄弟 div 在用户将 window 宽度和另一个 div 减小到 shrink/grow 后保持其固定宽度。

这里是JSBIN，同样有css，描述场景的js。

期望：

一旦我们调整 window 的大小，第一个 div (sibling) 将保持其固定宽度，而另一个 div 内部有 canvas 将基于 shrink/grow在 window 调整大小时，其中的 canvas 将占用其 parent 宽度（canvas 占用其 parent div 的逻辑已经写入在 js 文件中。）

一旦我从第二个 div 中删除 canvas 元素，调整大小工作正常。这是 JSBIN 显示第一个 div 保持固定宽度，其他 div 到 shrink/grow 一旦用户减少 windows 宽度。

Answer 1

可以使用CSS网格得到效果：

#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

内部有 2 个 div 的 Flex 盒子一个内部有 canvas

Flex box having 2 div inside it one having canvas inside it

javascript

css

addeventlistener

window-resize

flexbox

内部有 2 个 div 的 Flex 盒子 一个内部有 canvas

Flex box having 2 div inside it one having canvas inside it

javascript

css

addeventlistener

window-resize

flexbox

内部有 2 个 div 的 Flex 盒子一个内部有 canvas