TL；DR:下面是一個完整的頁面示例:https://jsfiddle.net/rfp8xv6g/show(此處可編輯:https://jsfiddle.net/rfp8xv6g)，如何使畫布(帶紫色邊框)垂直完全包含在容器中，而不硬編碼一個高度？

下面是一個簡化的例子。我有以下布局(點擊& quot整頁& quot以便能夠看到它)。

左列包含一個包裝器，其中包含幾個& lt畫布& gt一個在另一個之上(為了簡單起見，這里只有一個畫布)。

問題:如果畫布寬度/高度很高(在畫布坐標系中，這里是4000x3000)，則整個畫布不可見(高度太高，它會超出視口)。

如何使畫布縮放/收縮到包含在左欄中？(沒有頁面垂直滾動條)

此處最大寬度:100%；使畫布水平放置。

但是max-height:100%；不做任何效果:畫布沒有被垂直包含，為什么？

* {
  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: center;
  justify-content: center;
}

.left-column {
  background-color: green;
  display: flex;
}

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

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>

如果您希望畫布適應flex元素的高度，那么您不需要指定align-items:center；flex容器中的值。或者需要添加align-self:stretch；到撓性元件。 您也可以使用flexbox來居中畫布容器。

事實上，解決問題的所有代碼都可以歸結為:

.zone-left-column {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.canvas-wrapper {
  min-height: 0;
}

下面是一個完整的例子:

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

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

.page {
  max-width: 70rem;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  background-color: yellow;
}

.toolbar {
  background-color: rgba(200, 200, 200, 0.5);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 5rem;
}

.container {
  background-color: red;
  flex: 1;
  overflow: hidden;
  gap: 2rem;
}

.flex-horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
}

.zone-left-column {
  background-color: green;
  /* add