我有一个完整大小的页面，包含一个顶部工具栏，下面是一个有两列的容器:
- 右栏
- 包含画布(在此列中水平居中和垂直居中)的左栏，画布有自己的坐标系(通常为4000 x 3000)，应保留此纵横比.这幅画布上有一个"+"按钮.(在我的实际代码中，多个层和多个按钮有几个画布，但这里并不重要)
在这里它nearly可以工作，但我不能使画布占据左列中的全部可用空间.
对于我try 的所有方法(max-width: 100%,max-height: 100%)，要么在我们放大/缩小浏览器时失败(70%，80%...150%)，要么失败，因为所使用的方法阻止按钮停留在画布的右上角.
TL;DR: how to make this canvas take all available space in the left column, keeping its aspect ratio, keeping the layered buttons, without overflow?个
注:我正在寻找一个CSS解决方案，JS不是为定位，但只有图纸.
ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 1000, 1000);
ctx.fillStyle = "#00FF00"; ctx.fillRect(1000, 1000, 1000, 1000);
ctx.fillStyle = "#0000FF"; ctx.fillRect(2000, 2000, 1000, 1000);
ctx.fillStyle = "#000000"; ctx.fillRect(3000, 0, 1000, 1000);* {
padding: 0;
margin: 0;
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
}
.toolbar {
background-color: yellow;
flex: 0 0 5em;
}
.container {
background-color: orange;
flex: 1 0 0;
display: flex;
}
.left {
background-color: magenta;
flex: 1 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.right {
background-color: salmon;
flex: 0 0 10em;
}
.canvas-wrapper {
background-color: grey;
display: flex;
position: relative;
}
canvas {
height: 100px;
background-color: white;
}
.button {
background-color: yellow;
position: absolute;
top: 0;
right: 0;
width: 1em;
height: 1em;
}<div class="page">
<div class="toolbar">
TOOLBAR OF HEIGHT 5 EM
</div>
<div class="container">
<div class="left">
<div class="canvas-wrapper">
<canvas width="4000" height="3000"></canvas>
<div class="button">+</div>
</div>
</div>
<div class="right">
RIGHT OF WIDTH 10 EM
</div>
</div>
</div>PS:您必须在"完整页面"中打开代码片段，才能看到浏览器的放大/缩小功能(CTRL+、CTRL-).