aspect-ratio 在 flex item 中触发溢出的直接原因是其不改变 flex-basis，而默认 flex-basis: auto 优先按内容尺寸计算主轴大小，若内容过宽且未设 max-width 或 flex-shrink: 1，浏览器先撑开再套用宽高比，导致溢出。
aspect-ratio 在 flex item 中触发溢出的直接原因
因为 aspect-ratio 本身不改变 flex 项目的 flex-basis，而默认 flex-basis: auto 会优先按内容尺寸计算初始主轴大小——此时若内容宽度过大，又没设 max-width 或 flex-shrink: 1，浏览器就会先按内容撑开，再套用宽高比，导致实际宽度超出容器。
Flex 容器中让 aspect-ratio 正常工作的必要条件
必须显式干预 flex 项目的尺寸收敛逻辑，否则 aspect-ratio 只是“事后调节”，不是“约束前提”：
-
flex-basis不能依赖内容（比如设为0或具体值），推荐用flex: 0 1 auto→ 改为flex: 0 1 0px或flex: 1 - 主轴方向需有明确约束：父容器设
width/max-width，或子项设max-width: 100% - 避免同时设置
width和aspect-ratio—— width 会覆盖 aspect-ratio 的宽度推导逻辑 - 注意
min-width: auto（Flex 默认值）可能阻止收缩，必要时设min-width: 0
一个典型修复写法（含对比）
错误写法（溢出常见）：
.container { display: flex; width: 300px; }
.item { aspect-ratio: 16/9; } /* 没控 flex-basis，内容宽 > 300px 就溢出 */修复写法（推荐）：
立即学习“前端免费学习笔记（深入）”；
.item {
flex: 0 1 0px; /* 关键：让主轴尺寸从 0 开始，由 aspect-ratio + 容器约束决定 */
max-width: 100%; /* 防止 flex-grow 过度拉伸 */
aspect-ratio: 16/9;
min-width: 0; /* 允许 flex-shrink 生效 */
}兼容性与 fallback 注意点
aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 支持良好，但旧版本或某些安卓 WebView 仍不支持。若需降级：
- 不要只靠
padding-top百分比 hack（它依赖 height: 0，和 flex 布局易冲突） - 更稳妥的是用 JS 监听容器宽度并动态设 height，或改用 CSS container queries（需现代支持）
- 用
@supports (aspect-ratio: 1)包裹新写法，fallback 里用height: auto+ 显式width
真正容易被忽略的是：flex 的收缩行为（flex-shrink）和 min-width 默认值，在没显式重置时，会让 aspect-ratio 彻底失效——它不是“不生效”，而是被 flex 布局的尺寸计算顺序压在了最后一步。
