如何让Canvas在Flex布局左侧列占满可用空间并保持宽高比

我有一个全屏页面，布局结构如下：

• 顶部固定高度的工具栏
• 下方容器分为左右两列：
  • 右侧列固定宽度
  • 左侧列包含一个Canvas（需在列内水平垂直居中），Canvas原生尺寸为4000x3000，必须保留宽高比；Canvas上层叠一个固定在其右上角的"+"按钮

目前布局接近预期，但存在两个核心问题：

1. 无法让Canvas占据左侧列的全部可用空间，尝试max-width: 100%、max-height: 100%后，在浏览器缩放（70%-150%）时会失效
2. 调整Canvas尺寸时，右上角的按钮无法稳定固定在Canvas角落

需求：仅用CSS实现Canvas自适应左侧列可用空间、保持宽高比、按钮固定在Canvas右上角且无溢出，JS仅用于绘图不负责定位。

关键是利用aspect-ratio属性匹配Canvas原生宽高比（4000/3000 = 4/3），同时通过max-width和max-height限制Canvas不超出左侧列的可用空间，配合容器的定位确保按钮始终绑定Canvas。

修改后的CSS代码如下：

* {
  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;
  padding: 0.5em; /* 可选：给Canvas留一点边距 */
}

.right {
  background-color: salmon;
  flex: 0 0 10em;
}

.canvas-wrapper {
  background-color: grey;
  position: relative;
  /* 让容器尺寸完全贴合Canvas */
  display: inline-block;
}

canvas {
  /* 匹配Canvas原生宽高比 */
  aspect-ratio: 4/3;
  /* 占据容器最大可用空间，不超出左侧列范围 */
  max-width: 100%;
  max-height: 100%;
  /* 确保Canvas内容显示清晰 */
  object-fit: contain;
  background-color: white;
}

.button {
  background-color: yellow;
  position: absolute;
  top: 0.2em; /* 可选：调整按钮与边缘的距离 */
  right: 0.2em;
  width: 1em;
  height: 1em;
  cursor: pointer;
}

代码说明 #

1. 宽高比控制：aspect-ratio: 4/3直接匹配Canvas原生的4000x3000比例，无需动态计算尺寸
2. 自适应空间：max-width: 100%和max-height: 100%确保Canvas不会超出左侧列的可用范围，浏览器缩放时也能自适应
3. 按钮定位稳定：canvas-wrapper设置为inline-block，使其尺寸完全贴合Canvas，按钮的绝对定位基于该容器，确保始终固定在Canvas右上角
4. 可选优化：给left容器添加内边距避免Canvas紧贴边缘；调整按钮的top/right值优化视觉效果

完整的HTML和JS代码保持不变：

HTML代码 #

<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>

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);

内容的提问来源于stack exchange，提问作者Basj