如何让可缩放的Flex容器保持16:9宽高比？

核心问题分析 #

1. 横向滚动出现：你给.flex-align设置了width:100vw和padding:1vw，默认盒模型下元素总宽度是100vw + 2vw（左右各1vw内边距），超出视口宽度导致横向滚动。
2. 内边距不对称/对齐异常：flex容器的内边距设置后，盒子的缩放逻辑没匹配这个内边距，加上flex属性的误用导致盒子尺寸计算混乱。
3. 100vh的含义：100vh是当前视口（浏览器可见区域）高度的100%，桌面端对应窗口可用高度；移动端需注意，浏览器地址栏/导航栏会动态改变视口高度，可能导致元素被遮挡。

修正方案 #

关键调整点 #

• 给容器添加box-sizing: border-box，让内边距包含在元素宽高计算内，避免溢出。
• 移除flex-grow/flex-shrink/flex-basis，无需flex拉伸收缩逻辑，仅用flex实现居中。
• 给16:9盒子设置合理的最大宽高，确保在容器内（含内边距）不溢出，同时维持比例。

修正后的代码 #

HTML

<div class="flex-align">
  <div class="aspect-ratio-box"></div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
  /* 确保body占满视口，避免容器高度不足 */
  min-height: 100vh;
}

.flex-align {
  height: 100vh;
  margin: 0;
  padding: 1vw;
  /* 盒模型调整，内边距纳入宽高计算 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 块级元素默认width:100%，无需额外设置100vw */
}

.aspect-ratio-box {
  background: red;
  /* 维持16:9固定比例 */
  aspect-ratio: 16/9;
  /* 盒子最大宽度不超过容器可用宽度 */
  max-width: 100%;
  /* 盒子最大高度不超过容器可用高度 */
  max-height: 100%;
  /* 自动缩放尺寸，保持比例 */
  width: auto;
  height: auto;
}

额外说明 #

• 若需要调整盒子留白，直接修改.flex-align的padding值即可，盒子会自动适配剩余空间。
• 移动端若遇100vh导致底部元素被遮挡，可改用min-height: 100dvh（动态视口高度），适配浏览器动态变化的视口范围。

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