Scenerio:
Вот мой 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 дочерних элемента, а именно sibling и canvasParent, у брата есть фиксированная ширина, тогда как canvasParent примет оставшуюся ширину. В настоящее время он ведет себя не так, как ожидается, когда мы уменьшаем ширину окна, тогда первый div(sibling) уменьшает его ширину, а ширина другого div постоянна, тогда как я хочу, чтобы элемент div оставался на своей фиксированной ширине, как только пользователь уменьшит ширину окна идругой div для уменьшения / роста.
Вот JSBIN для того же самого, имеющего css, js для описанного scenerio.
Ожидание:
Как только мы изменим размер окна, первый div (sibling) сохранит свою фиксированную ширину, а другой div с холстом внутри будет уменьшаться / увеличиваться в зависимости от изменения размера окна, а холст внутри него будет иметь родительскую ширину (Логика для холста, чтобы взять его родительский div уже записана в js-файле.)
И изменение размера работает отлично, как только я удаляю элемент canvas из второго div. Вот JSBIN , которые показывают, что первый div остается на фиксированной ширине, а другой div уменьшается / увеличивается, когда пользователь уменьшает ширину окна.