video在flex容器中不缩放的根本原因是其作为替换元素默认按固有尺寸渲染，且flex对video等替换元素的宽度约束不自动生效；需用aspect-ratio设于包裹容器、video设width:100%和height:100%、并配合min-width:0才能实现响应式等比缩放。
为什么video在flex容器里不缩放
不是video本身“不响应”，而是它默认按固有尺寸渲染，且flex对替换元素（如video、img）的宽度约束不自动生效。即使父容器设了display: flex，子video仍可能溢出或卡死在原始宽高，尤其在窄屏下。
常见错误现象包括：video横向滚动、右侧被裁切、比例失真、或完全不随容器变宽。
-
video未设width: 100%，仅靠flex: 1无法强制拉伸 - 父
flex容器没设明确宽度（比如max-width或width），导致计算上下文缺失 - 直接对
video设aspect-ratio——部分浏览器（尤其是 Safari 15.3 及更早）不支持该属性作用于替换元素
用aspect-ratio + width: 100%组合修复
现代解法是把aspect-ratio设在video的包裹容器上，再让video自身填满该容器。这是目前最简洁、无需 JS、兼容性可控的方案。
正确结构与样式：
立即学习“前端免费学习笔记（深入）”；
<div class="video-wrapper">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>.video-wrapper {
aspect-ratio: 16 / 9;
max-width: 100%;
}
.video-wrapper video {
width: 100%;
height: 100%;
display: block;
}-
aspect-ratio必须写在容器（.video-wrapper）上，不能直接写video -
video必须显式设width: 100%和height: 100%，否则aspect-ratio容器的约束无效 - 若视频比例不统一，用类名区分：
class="video-wrapper ratio-4x3"+.ratio-4x3 { aspect-ratio: 4 / 3; }
Flex子项里嵌table或video时特别容易踩的坑
当video作为flex子项直接存在（无额外包裹层），且父容器同时存在其他flex子项（如侧边栏+主内容区），问题会叠加放大：表格或视频这类固有尺寸元素会“锁死”flex-basis，导致flex-grow失效。
- 不要给
video设flex: 1后还加width: 300px——二者冲突，浏览器优先按flex-basis算初始宽 - 若父
flex是row方向，确保video所在项没被min-width卡住（比如min-width: 400px会让它拒绝缩小） - Element UI 或 Ant Design 的
table组件嵌在flex里时，同理需额外包裹并设width: 100%，否则内部table按内容撑开，无视父flex
旧浏览器降级 fallback 必须手动加
aspect-ratio在 Safari 15.3 及更早版本、部分安卓 WebView 中不生效，此时需用padding-top技巧兜底。不能只依赖现代写法。
推荐写法（带@supports检测）：
.video-wrapper {
position: relative;
max-width: 100%;
}
@supports not (aspect-ratio: 1) {
.video-wrapper::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 = 9/16 ≈ 0.5625 */
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}- 降级方案中
::before必须用padding-top百分比，不能用height，因为height: 56.25%依赖父高，而父高此时为 0 - 务必检查
video是否被controls或poster影响高度——它们可能破坏height: 100%的填充效果 - 移动端全屏播放时，
controls会临时改变布局，建议测试真机而非仅靠模拟器
实际项目里最容易被忽略的，是video外层容器没设max-width: 100%，导致它在小屏下依然试图撑满父flex剩余空间，而父容器本身又没做宽度限制——这时aspect-ratio就成摆设。
