video在flex容器中不占满空间，是因为它作为替换元素有固有尺寸且flex规则不自动生效；需显式设置width:100%、height:100%、display:block，并确保父容器有明确高度，推荐用min-height:100dvh及包裹容器控制aspect-ratio。
video 在 Flex 容器里不占满空间，不是它“不肯听话”，而是浏览器默认把它当做一个有固有尺寸的替换元素，且 Flex 的伸缩规则对它不自动生效。
video 没设 width: 100% 和 height: 100%
Flex 子项即使写了 flex: 1，也只管分配主轴空间；它不会强制替换元素（如 video、img）拉伸自身内容。video 默认按原始宽高渲染，除非你显式告诉它：“填满我所在的盒子”。
- 必须给
video加width: 100%和height: 100% - 同时加
display: block，避免行内元素默认的基线对齐留白 - 若父容器是
flex-direction: column，还要确认父容器有明确高度（比如min-height: 100dvh）
父 Flex 容器没设可计算的宽高上下文
Flex 不凭空造空间。
- 水平方向：viewport 宽度天然兜底，
width: 100%多半能算出来 - 垂直方向：
height: auto的父容器，computed height 就是 0 或内容高 →height: 100%的video无处可填
检查手段：
- 打开开发者工具，看父容器的 computed
height是不是auto或0px - 根级容器建议用
min-height: 100dvh（比100vh更稳，避开 iOS 软键盘缩 viewport） - 中间层若参与纵向伸缩，自己也得是
display: flex，不能只靠继承
直接在 video 上写 aspect-ratio
这个写法看起来简洁，但不可靠：
- Safari 15.3 及更早版本不支持
aspect-ratio作用于替换元素 - 即使支持，
aspect-ratio+width: 100%组合也必须配合min-width: 0才能防锁死（尤其当video是多个 flex 子项之一时）
正确做法是：
- 把
aspect-ratio写在video的包裹容器上（如.video-wrapper） -
.video-wrapper设max-width: 100%，并确保它自己是 Flex 子项或块级容器 -
video本身只负责填满该容器：width: 100%; height: 100%; display: block;
video 是 Flex 直接子项，且旁边还有其他兄弟元素
这时问题会叠加：
-
video作为替换元素自带min-width: auto，会“锁住”最小宽度 - 如果兄弟项是文字或输入框，它们也带
min-width: auto，导致flex-grow分配失衡 - 若父容器是
row方向，还可能被min-width（比如min-width: 400px）卡住无法缩小
解决办法：
- 给所有 flex 子项加
min-width: 0（包括video的包裹容器） - 避免给
video同时写flex: 1和width: 300px—— 二者冲突，浏览器优先按flex-basis算初始宽
最常被忽略的一点：video 必须被包裹，不能裸奔在 Flex 容器里。哪怕只是套一层 <div class="video-wrapper">，也能绕过多数兼容性和伸缩逻辑陷阱。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
