设置aspect-ratio的flexbox元素max-height属性失效如何解决

基于flex搭建的等比自适应页面，需要实现：页面最大高度不超过屏幕高度，当高度达到屏幕高度时停止纵向延伸，左右两侧自动留白。
给body设置max-height: 100vh、margin: 0 auto后未达预期：窄屏显示正常，宽屏会出现垂直滚动条，既没有限制住高度，也没有生成左右留白。

附原始代码：

<body class="center">
  <div class="container">
    <div class="menu center">menu</div>
    <div class="game">
      <div class="content">
        <div class="grid">
          <div class="cell center">1</div>
          <div class="cell center">2</div>
          <div class="cell center">3</div>
          <div class="cell center">4</div>
          <div class="cell center">5</div>
          <div class="cell center">6</div>
          <div class="cell center">7</div>
          <div class="cell center">8</div>
          <div class="cell center">9</div>
        </div>
        <div class="controls center">controls</div>
      </div>
      <div class="chat center">chat</div>
    </div>
  </div>
</body>

body {
  height: 100vh;
  max-height: 100vh;
  margin: 0 auto;
  display: flex;
}

.container {
  flex: 1;
  display: flex;
}

.menu {
  min-width: 100px;
  background-color: red;
}

.game {
  flex: 1 1 auto;
  display: flex;
}

.content {
  flex: 3 0 200px;
  flex-direction: column;
}

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  aspect-ratio: 1 / 1;
}

.cell {
  font-size: 2em;
  background-color: green;
}

.controls {
  height: 200px;
  background-color: yellow;
}

.chat {
  flex: 1 0 100px;
  background-color: lightblue;
}

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

• flex元素默认属性为min-height: auto，嵌套flex布局下子元素默认不会收缩适配父容器高度，哪怕父容器设置了固定高度/最大高度，子元素仍会撑开容器导致溢出。
• .content元素只写了flex-direction: column，没有设置display: flex，纵向flex布局根本没有生效，内部网格、控制区的布局不受flex规则约束。
• 正方形网格设置了aspect-ratio: 1/1但没有高度约束，宽屏时宽度随容器无限放大，高度也同步增长，最终超过视口高度把整个页面撑出滚动条。

修改后的CSS如下：

/* 全局盒模型重置，避免边框、内边距额外撑大元素 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.container {
  height: 100%;
  /* 宽高比匹配页面内容固有比例，宽屏时高度受100vh限制，宽度自动按比例收缩 */
  aspect-ratio: 4 / 5;
  display: flex;
}

.menu {
  min-width: 100px;
  background-color: red;
}

.game {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.content {
  flex: 3 0 200px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  aspect-ratio: 1 / 1;
  flex: 1 1 auto;
  min-height: 0;
}

.cell {
  font-size: 2em;
  background-color: green;
}

.controls {
  flex: 0 0 200px;
  height: 200px;
  background-color: yellow;
}

.chat {
  flex: 1 0 100px;
  background-color: lightblue;
  min-height: 0;
}

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

• 所有嵌套flex层级的容器都添加min-height: 0，覆盖默认的min-height: auto规则，允许子元素收缩适配父容器高度，从根源解决内容撑出滚动条的问题。
• 给.content补上display: flex，让纵向弹性布局生效。
• 给最外层.container设置匹配内容比例的aspect-ratio，搭配body的justify-content: center，宽屏时容器高度锁死为100vh，宽度自动按比例收缩，剩余空间自动成为左右留白。
• 给body添加overflow: hidden做兜底，避免极端尺寸下出现滚动条。
• 全局设置box-sizing: border-box，统一盒模型计算规则，避免尺寸计算偏差。

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