如何在Flex布局容器中使Canvas自适应宽高并完全被容纳？

为什么max-height: 100%无效？ #

你当前代码里max-height:100%不生效的核心原因是父元素没有明确的高度参照：

• .page是flex容器，但设置了align-items:center，这会让子元素（.left-column）的高度收缩为内容高度，而非继承.page的100%高度；
• .canvas-wrapper没有任何高度约束，它的高度由Canvas原始尺寸（3000px）决定，Canvas的max-height:100%自然找不到有效的参照高度。

解决方案 #

只需调整几处CSS，就能让Canvas等比例缩放并完全容纳在左侧列中，且不会出现页面滚动条：

修改后的完整代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body, 
.page {
  height: 100%;
  width: 100%;
}

.page {
  background-color: red;
  overflow: hidden;
  display: flex;
  /* 将align-items改为stretch，让子元素拉伸到容器高度 */
  align-items: stretch;
}

.left-column {
  background-color: green;
  display: flex;
  /* 让左侧列宽度自适应内容，不挤压右侧 */
  flex: 0 0 auto;
}

.right-column {
  background-color: orange;
  flex: 1;
}

.canvas-wrapper {
  /* 让wrapper占满左侧列的高度 */
  height: 100%;
  /* 使用flex布局让Canvas居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 防止Canvas溢出时出现滚动条 */
  overflow: hidden;
  padding: 8px; /* 可选：给Canvas留一点内边距 */
}

canvas {
  border: 3px solid magenta;
  /* 等比例缩放，不超出容器的宽高 */
  max-width: 100%;
  max-height: 100%;
}

<div class="page">
  <div class="left-column">
    <div class="canvas-wrapper">
      <canvas width="4000" height="3000"></canvas>
    </div>
  </div>
  <div class="right-column">
    RIGHT
  </div>
</div>

关键调整说明 #

1. .page的align-items: stretch：让左侧列和右侧列自动拉伸到.page的100%高度，给Canvas的高度约束提供顶层参照；
2. .canvas-wrapper的高度与flex布局：让wrapper占满左侧列的高度，同时通过flex布局让Canvas在容器内居中，overflow:hidden确保Canvas缩放后不会超出容器；
3. Canvas的max-width+max-height：保持Canvas的原始宽高比，自动缩放以适应容器的最大可用空间，不会出现水平或垂直溢出。

调整后，无论视口尺寸如何变化，Canvas都会等比例缩放并完全容纳在左侧列中，页面不会出现垂直滚动条。

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