在Flex列中放置响应式正方形棋盘的适配问题

你的核心问题是基于宽度计算的aspect-ratio会导致棋盘高度超出父容器的可用空间——当视口高度较小时，width:100%推导的高度会超过.child的剩余高度，而max-height:100%无法覆盖aspect-ratio的计算逻辑。同时实际场景中Header/Footer高度不固定，需要让它们自适应内容，再让棋盘填充剩余空间并保持正方形。

修改后的完整代码 #

CSS #

.parent {
  height: 100vh;
  margin: 0;
  background-color: grey;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止整体溢出视口 */
}

.header {
  background-color: blue;
  /* 移除固定height，自适应内容 */
  padding: 8px;
}

.child {
  background-color: red;
  flex: 1 1 auto;
  /* 让child成为flex容器，用于居中棋盘 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px; /* 可选：给棋盘留边距 */
  overflow: hidden; /* 防止棋盘溢出child */
}

.chessboard {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1/1;
  background-color: purple;
  /* 内部棋格布局示例 */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

/* 棋格示例样式 */
.chess-cell {
  aspect-ratio: 1/1;
  border: 1px solid #000;
}

.footer {
  background-color: green;
  /* 移除固定height，自适应内容 */
  padding: 8px;
}

HTML #

<div class="parent">
  <div class="header">
    这是自适应高度的Header，内容换行也会自动调整高度
  </div>
  <div class="child">
    <div class="chessboard">
      <!-- 示例棋格 -->
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <!-- 重复更多棋格以填满8x8棋盘 -->
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <div class="chess-cell"></div>
      <!-- 剩余48个棋格省略 -->
    </div>
  </div>
  <div class="footer">
    这是自适应高度的Footer，文本数量变化时高度自动调整
  </div>
</div>

关键逻辑说明 #

• 父容器.parent：用height:100vh占满视口，flex-direction:column让Header、棋盘容器、Footer垂直排列，overflow:hidden确保整体不会超出视口。
• Header/Footer：移除固定高度，通过padding控制内边距，高度完全由内容决定，适配你实际场景中内容换行、文本数量变化的需求。
• 棋盘容器.child：flex:1 1 auto占据Header和Footer之外的剩余空间，同时设置为flex容器，用align-items:center和justify-content:center让棋盘居中，overflow:hidden防止棋盘意外溢出。
• 棋盘.chessboard：核心修改是用max-width:100%和max-height:100%替代固定width:100%，配合aspect-ratio:1/1，浏览器会自动选择可用宽度和高度中较小的那个作为基准，生成最大的正方形，既保证填满空间，又不会溢出。
• 内部棋格：通过grid布局配合aspect-ratio:1/1，会自动跟随棋盘尺寸缩放，保持正方形比例。

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