flex-grow与aspect-ratio冲突本质是计算前提互斥：flex-grow依赖flex-basis起点，而aspect-ratio需“宽度可测+高度未锁定”；flex-basis:auto由内容撑宽会覆盖比例推导，必须设flex-basis:0、min-width:0，并用包裹容器设aspect-ratio。
flex-grow 和 aspect-ratio 冲突的本质原因
不是 flex-grow 本身会“破坏”比例，而是它依赖的计算前提和 aspect-ratio 的生效条件互相打架：flex-grow 分配的是主轴剩余空间，但它的起点（flex-basis）若由内容撑开，就会覆盖掉 aspect-ratio 所需的“宽度可测 + 高度未锁定”状态。典型表现是：图片/视频容器高度塌陷、比例失真，或子项在 flex 容器中被拉宽压扁。
必须显式设 flex-basis: 0，不能只靠 flex: 1
flex: 1 等价于 flex: 1 1 auto，其中 flex-basis: auto 会让浏览器先测量子项内容宽度（比如长文本、固有尺寸的 video），这个测量值直接成为 grow 的起点——aspect-ratio 就没机会介入高度推导了。
- ✅ 正确写法：
flex: 0 0 0或分开写：flex-grow: 0; flex-shrink: 0; flex-basis: 0; - ⚠️ 错误写法：
flex: 1、flex-grow: 1单独使用、或flex: 1 1 0（flex-shrink: 1仍允许压缩） - 如果后续确实需要 grow 行为（比如卡片等宽排列），应改用
flex-grow: 1; flex-basis: 0;，并确保父容器宽度可计算
替换元素（img、video）必须加 min-width: 0
Flex 子项默认 min-width: auto，这是浏览器对替换元素的保护机制，防止它们被缩得太小。但它会锁死 aspect-ratio 的高度计算，哪怕你写了 width: 100% 和 aspect-ratio: 16 / 9，computed styles 中 height 仍可能是 0px 或 auto。
- 必须在
img或video元素上直接加：min-width: 0 - 若它们被包裹（如
<div class="wrapper"><video></video></div>），则.wrapper作为 flex 子项也要加min-width: 0 - 别混淆：
shrink-0（Tailwind）只设flex-shrink: 0，不解决min-width问题；必须配min-w-0
包裹容器才是 aspect-ratio 的正确落点
直接给 img 或 video 设 aspect-ratio 是无效的——规范明确要求替换元素不响应该属性，浏览器会标记为 “inactive”。所有现代解法都基于“容器控制比例，子元素填满并约束渲染”这一模式。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构必须包裹：
<div class="ratio-box"><img src="..." alt="在CSS中怎样防止flex-grow撑开子元素时破坏既有的宽高比aspect-ratio？" ></div>，且移除img上的width/height内联属性 - CSS 关键三行：
.ratio-box { aspect-ratio: 16 / 9; width: 100%; min-width: 0; }+.ratio-box img { width: 100%; height: 100%; object-fit: cover; display: block; } - 旧浏览器 fallback 必须真降级：
@supports不可靠（尤其 iOS Safari 15.3、X5 内核），得用padding-top+position: absolute做兜底
真正容易被忽略的点是：这四个环节（flex-basis: 0、min-width: 0、包裹容器设 aspect-ratio、子元素显式 width/height: 100%）缺一不可。少一个，DevTools 里就可能看到 aspect-ratio 被划掉，或者 height 计算结果为 0。
