在带overflow-x:auto的CSS Flex容器中实现换行的问题

问题需求 #

• 大屏设备（≥769px）：6列Grid布局，特色视频占4列3行，此部分已实现
• 小屏设备（≤768px）：特色视频全屏独占一行，下方普通视频横向滚动（显示1-2个完整缩略图+部分缩略图提示可滚动）
• 限制：不可修改现有HTML结构，仅允许给第一个普通视频添加first-regular-video类

解决方案 #

核心思路：通过绝对定位将特色视频固定在容器顶部，容器预留对应高度的内边距，普通视频保持横向滚动布局，既不破坏大屏Grid结构，又满足小屏需求。

步骤1：修改HTML（仅添加类） #

给第一个普通视频添加first-regular-video类（此操作不影响大屏布局）：

<div class="video first-regular-video">
    <!-- 原有内容不变 -->
</div>

步骤2：更新小屏媒体查询CSS #

替换原小屏CSS为以下代码：

@media only screen and (max-width: 768px) {
  .videoplayer-container {
    overflow-x: auto;
    padding-top: calc(56.25% + 20px); /* 16:9视频比例 + 内边距与间距 */
    position: relative;
    gap: 10px;
  }

  .featured-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #fdc300;
    box-sizing: border-box;
    padding: 10px;
    padding-top: 56.25%; /* 维持16:9视频比例 */
    position: relative;
  }

  .featured-video iframe {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }

  .video:not(.featured-video) {
    display: inline-block;
    flex: 0 0 auto;
    border: 1px solid #fdc300;
    padding: 10px;
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    margin-right: 10px;
    vertical-align: top;
  }

  /* 最后一个视频移除右侧间距，避免多余留白 */
  .video:last-child:not(.featured-video) {
    margin-right: 0;
  }
}

方案说明 #

1. 特色视频布局：通过绝对定位固定在容器顶部，利用padding-top:56.25%维持16:9的视频比例，确保自适应高度
2. 容器预留空间：padding-top的值等于特色视频的高度+间距，保证普通视频不会被特色视频遮挡
3. 普通视频滚动：设置为inline-block，保持横向排列，容器的overflow-x:auto实现横向滚动效果，同时显示部分缩略图提示用户可滚动

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