flex容器中aspect-ratio失效的直接原因是align-items: stretch在交叉轴上强行拉高子项，覆盖其按比例计算出的高度；须配合min-height: 0和width: 100%才能生效，否则仍被撑高或留白。
Flex容器中aspect-ratio失效的直接原因
不是aspect-ratio写错了，而是align-items默认值stretch在交叉轴上强行拉高子项，覆盖了aspect-ratio推导出的高度。浏览器先按比例算出理想高度，再被align-items: stretch重写为容器交叉轴剩余高度——结果就是元素被“撑高”、内容拉伸或留白突兀。
为什么align-items: stretch会破坏aspect-ratio
align-items: stretch只对**未设置明确高度（height）且未触发自身尺寸约束**的 flex 子项生效。而aspect-ratio计算出的高度属于“布局阶段生成的内在高度”，它不等于显式height，因此仍会被stretch劫持。
- 现象：卡片高度随父容器变高，内部图片/视频被垂直拉伸或上下留大片空白
- 关键条件：父
display: flex+ 子项无height+ 有aspect-ratio+ 交叉轴有可用空间 - 对比验证：
align-items: flex-start或align-items: center下aspect-ratio通常能正常工作
真正有效的修复方式
不能只改align-items，得切断stretch的生效路径。最稳方案是让子项“主动放弃被拉伸资格”：
- 给子项加
align-self: flex-start（覆盖父级align-items） - 或更推荐：
min-height: 0—— 这是flex子项的隐式最小高度锁，不设它，stretch就有理由把子项拉满 - 必须配合
width: 100%或具体宽度，否则aspect-ratio无基准可算 - 视频场景额外注意：
min-width: 0也要加，否则<video></video>固有尺寸会锁死宽度收缩
容易被忽略的兼容性陷阱
即使写了aspect-ratio和min-height: 0，iOS Safari 15.3 及更早版本仍会完全忽略该属性。不能只靠视觉判断是否生效：
- 真机测试必须覆盖 iOS 15.2–15.3、Chrome Android 99 及以下
- 用
@supports (aspect-ratio: 1/1)做渐进增强，老版本回退到padding-top+position: absolute - 别在同一个元素上同时写
height: 100%和aspect-ratio——后者会被前者覆盖，且无法触发自动高度计算
最常被漏掉的是min-height: 0。很多人以为align-self就够了，但flex子项的默认min-height: auto仍在暗中抵抗收缩，导致aspect-ratio在窄屏下突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
