flex=1 的 flexbox 中的畫布可以在沒有額外容器的情況下完成嗎？

Question

我想在 flexbox 中顯示帶有 flex=1 的畫布，並且我希望畫布具有與其物理尺寸相同的寬度/高度屬性，所以我使用：

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

當我縮小頁面時，畫布不會縮小的那一刻。 我試過這個：

canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

但它不起作用，也沒有我嘗試過的任何其他事情。 我將畫布包裹在額外的容器中：

 var f = footer.clientWidth; function line() { var ctx = canvas.getContext('2d'); ctx.strokeStyle = 'red'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(canvas.width, canvas.height); ctx.stroke(); } narrower.onclick = function () { footer.style.width = (footer.clientWidth - 20) + 'px'; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; line(); } wider.onclick = function () { footer.style.width = (footer.clientWidth + 20) + 'px'; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; line(); }

 footer { height: 3em; display: flex; outline: 2px solid fuchsia; } #container { flex: 1; outline: 1px solid lime; } canvas { outline: 1px dashed cyan; width: 100%; height: 100%; }

 <footer id="footer"> <button id="narrower">narrower</button> <div id="container"> <canvas id="canvas">aaa</canvas> </div> <button id="wider">wider</button> </footer>

我的問題是，可以在沒有額外容器的情況下完成嗎？

Answer 1

是的，這是您嘗試做的：

 var f = footer.clientWidth; function line() { var ctx = container.getContext('2d'); ctx.strokeStyle = 'red'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(container.width, container.height); ctx.stroke(); } narrower.onclick = function() { footer.style.width = (footer.clientWidth - 20) + 'px'; container.width = container.clientWidth; container.height = container.clientHeight; line(); } wider.onclick = function() { footer.style.width = (footer.clientWidth + 20) + 'px'; container.width = container.clientWidth; container.height = container.clientHeight; line(); }

 footer { height: 3em; display: flex; outline: 2px solid fuchsia; } #container { min-width: 0; display: block; flex: 1; outline: 1px solid lime; background: yellow }

 <footer id="footer"> <button id="narrower">narrower</button> <canvas id="container">aaa</canvas> <button id="wider">wider</button> </footer>