如何修复CSS Flex布局中视频元素无法自适应宽度的Bug？-css教程-PHP中文网

video在flex容器中不缩放的根本原因是其作为替换元素默认按固有尺寸渲染，且flex对video等替换元素的宽度约束不自动生效；需用aspect-ratio设于包裹容器、video设width:100%和height:100%、并配合min-width:0才能实现响应式等比缩放。

如何修复css flex布局中视频元素无法自适应宽度的bug？

为什么`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、兼容性可控的方案。

正确结构与样式：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="video-wrapper">
  <video controls><source src="demo.mp4" type="video/mp4"></source></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%;
  }
}