设置aspect-ratio后Flex容器宽度未随子项扩展的排查与解决

1. 容器#wrap是垂直方向的Flex容器（flex-direction: column），且设置了align-items: center，这会让子项在水平方向居中，但子项的宽度不会触发容器宽度扩展，容器宽度默认由最宽的子项（#timer或#home）决定。
2. #board的flex: 1让它在垂直方向占据#wrap的剩余空间，aspect-ratio: 1/1试图让宽度等于自身高度，但由于#wrap的宽度被#timer/#home限制，#board的宽度无法突破容器宽度，导致横屏时容器无法随#board的计算宽度扩展。
3. 当给#board设置固定宽高时，宽度是明确值，#wrap能直接基于这个值确定自身宽度，因此表现正常。

方案一：让容器宽度自适应子项宽度 #

给#wrap添加width: fit-content，让容器宽度自动适配所有子项的宽度（包括#board通过aspect-ratio计算出的宽度）：

#wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid blue;
  width: fit-content; /* 关键：容器宽度适配子项 */
}

#board {
  flex: 1;
  background-color: lightblue;
  aspect-ratio: 1 / 1;
  min-width: 0; /* 可选：防止内容溢出时容器异常 */
}

方案二：调整Flex对齐规则并限制最大宽度 #

修改#wrap的align-items为stretch，让#board宽度匹配容器，再通过margin: 0 auto让#board水平居中，同时添加max-width: 100vh确保方形不会超出视口：

#wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 子项宽度匹配容器 */
  justify-content: center;
  border: 2px solid blue;
}

#board {
  flex: 1;
  background-color: lightblue;
  aspect-ratio: 1 / 1;
  margin: 0 auto; /* 水平居中 */
  max-width: 100vh; /* 限制最大宽度，保持方形比例 */
}

完整代码示例（方案一） #

<div id="wrap">
  <div id="timer">00:00:00</div>
  <div id="board"></div>
  <div id="home">Home</div>
</div>

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 26%, rgba(89, 177, 185, 1) 100%);
}

#wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid blue;
  width: fit-content;
}

#timer,
#home {
  font-size: 7.5vh;
}

#board {
  flex: 1;
  background-color: lightblue;
  aspect-ratio: 1 / 1;
  min-width: 0;
}

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