如何在Flex父容器中实现响应式嵌入视频并解决高度拉伸问题

该需求完全可以实现，你遇到的高度拉伸问题来源于flex布局的默认属性：align-items默认值为stretch，会将所有flex子项的高度拉伸至和容器内最高元素对齐，和你原有响应式视频的高度计算逻辑冲突。

完整实现代码 #

HTML 结构 #

<div class="video-list">
  <div class="video-item">
    <div class="video">
      <iframe src="Youtube嵌入链接" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="video-item">
    <div class="video">
      <iframe src="Youtube嵌入链接" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <!-- 可无限添加更多视频项 -->
</div>

CSS 代码 #

/* 外层flex列表容器 */
.video-list {
  display: flex;
  flex-wrap: nowrap; /* 强制单行不换行 */
  overflow-x: auto; /* 超出部分横向滚动，可根据需求调整 */
  align-items: flex-start; /* 核心：关闭默认高度拉伸 */
  gap: 16px; /* 视频项间距，可自定义 */
  padding: 8px 0;
}

/* flex子项：每个视频的外层容器 */
.video-item {
  flex-shrink: 0; /* 禁止视频项被压缩 */
  width: 320px; /* 单个视频宽度，可自定义；如果需要所有视频平分容器宽度，把这行替换为 flex: 1 0 0; 即可 */
}

/* 原有响应式视频代码无需修改 */
.video {
    position: relative;
    height: 0;
    margin: auto;
    overflow: hidden;
    padding-bottom: 56.25%;
}

.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

核心逻辑说明 #

• 不需要改动原有响应式视频的宽高比计算逻辑，新增的样式仅适配flex布局的特性
• align-items: flex-start 直接解决高度拉伸问题，flex子项会按自身内容高度渲染
• flex-shrink: 0 保证所有视频项不会因为容器宽度不足被挤压变形，始终保持设定的宽度
• 如果不需要横向滚动，希望所有视频在可视区内平分宽度，只需把.video-item的width属性替换为flex: 1 0 0;即可

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