使用Flexbox实现响应式YouTube视频iframe在Firefox中失效问题求助

嘿，我来帮你搞定Firefox里这个flex布局的问题！Chrome和IE都正常，唯独Firefox出问题，大概率是浏览器对flex属性或者响应式容器的解析差异导致的，给你几个针对性的解决思路：

1. 明确Flex容器和子元素的核心属性 #

Firefox对flex布局的默认规则和Chrome有细微差别，比如flex子元素的min-width默认是auto，这可能会让视频容器撑破flex布局，没法横向平分空间。你可以给容器和子元素补充这些属性：

• 给flex容器.video-media-youtube-inner加上width: 100%;和flex-wrap: nowrap;，确保它占满父容器宽度且视频不换行
• 给每个视频容器.video-media-youtube-inner-vi01加上min-width: 0;，允许子元素收缩到小于内容宽度，避免布局溢出

2. 优化Flex属性的写法 #

你用的flex: 1在不同浏览器的解析可能不一致，换成更明确的flex: 1 1 0%;，这个写法强制三个视频容器平分可用空间，Firefox能更准确识别这个规则。

3. 用更可靠的响应式比例方案（推荐） #

原来的padding-bottom: 56.25%;是老的16:9比例实现方式，虽然兼容广，但Firefox在flex子元素里对这个百分比的计算偶尔会出问题。现在现代浏览器（包括Firefox）都支持aspect-ratio属性，用它替代更直观可靠：
把.video-media-youtube-inner-vi01里的padding-bottom: 56.25%; height: 0;换成aspect-ratio: 16/9; height: auto;，这样直接指定宽高比，不需要依赖padding的百分比计算。

4. 确保全局盒模型一致 #

给所有元素加上box-sizing: border-box;，避免padding和border影响容器宽度的计算，这能减少跨浏览器的布局差异。

修改后的完整CSS示例 #

/* 全局盒模型重置，避免宽度计算偏差 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.video-media-youtube-inner {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  gap: 1rem; /* 可选，给视频之间添加间距，提升视觉效果 */
}

.video-media-youtube-inner-vi01 {
  flex: 1 1 0%; /* 明确flex分配规则，确保三个视频平分空间 */
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9; /* 16:9的响应式比例，替代padding-bottom方案 */
  height: auto;
  min-width: 0; /* 允许子元素收缩，防止Firefox布局溢出 */
}

.video-media-youtube-inner-vi01 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

如果需要兼容非常老旧的Firefox版本（不支持aspect-ratio），可以回到padding-bottom的方案，但要确保给.video-media-youtube-inner-vi01加上width: 100%;，同时保留min-width: 0;和明确的flex属性值，这样也能解决Firefox的布局问题。

内容的提问来源于stack exchange，提问作者stillday