CSS布局问题：视频流区块无法实现自适应多行排列

问题根源 #

布局失效的核心原因是重复使用了唯一ID video-streams——每个<section id="video-streams">都是独立的Flex容器，导致每个.video-container只能单独占据一行，无法实现并排排列。

修复方案 #

1. 修正HTML结构

将所有用户视频容器合并到同一个section#video-streams中（ID在HTML文档中必须唯一，不能重复定义）：

<main class="room-main">
    <section id="room-name-wrapper">
        <p>Room Name: <span id="room-name"></span></p>
    </section>

    <section id="video-streams">
        <div class="video-container" id="user-container-1">
            <div class="username-wrapper" ><span class="user-name" > My Name </span></div>
            <div class="video-player" id="user-1"></div>
        </div>

        <div class="video-container" id="user-container-2">
            <div class="username-wrapper" ><span class="user-name" > My Name </span></div>
            <div class="video-player" id="user-2"></div>
        </div>

        <div class="video-container" id="user-container-3">
            <div class="username-wrapper" ><span class="user-name" > My Name </span></div>
            <div class="video-player" id="user-3"></div>
        </div>
    </section>
</main>

2. 优化CSS配置

调整Flex容器和子元素的属性，确保能根据屏幕空间自动调整每行显示数量：

#video-streams{
    color: #FEA832;
    background-color: #FEA832;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* 替代margin，实现更均匀的元素间距 */
    height: 85vh;
    width: 75%;
    margin: 0 auto;
    padding: 4px;
}

.video-container{
    color: #FEA832;
    flex-basis: 45%; /* 默认每行显示2个元素 */
    flex-grow: 1;
    min-width: 350px; /* 定义最小宽度，空间不足时自动换行 */
    min-height: 350px;
    border: 1px solid;
    border-radius: 5px;
    background-color: #212121;
}

效果说明 #

• 默认状态下，.video-container占容器宽度的45%，每行显示2个；
• 当屏幕空间缩小到无法容纳2个350px宽度的容器时，自动换行；
• 当容器数量增加且空间充足时，会自动调整为每行3个、4个（具体数量取决于容器宽度和屏幕尺寸）。

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