部分未正确堆叠 CSS

Question

I want each section to stack side by side in rows of 2, the sections may keep growing whenever a new user is added so there may be well over 8 in the case of it not fitting on screen I need it to change into rows of 4 or 3. Im running into an issue where I can't even get the first 3 to fit properly on screen. I want a row of 2 and then one on the bottom but it just makes rows of 1 and I have to scroll to see the bottom 2..

HTML Code:

<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>

    </section>

    <section id="video-streams">
        <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>

    </section>

    <section id="video-streams">
        <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>

CSS Code:

#video-streams{
    color: #FEA832;
    background-color: #FEA832;
    display: flex;
    flex-wrap: wrap;
    height: 85vh;
    width: 75%;
    margin: 0 auto;
}

.video-container{
    color: #FEA832;
    flex-basis: 500px;
    flex-grow: 1;
    max-height: 100%;
    min-height: 350px;
    border: 1px solid;
    border-radius: 5px;
    margin: 2px;
    background-color: #212121;
}

Answer 1

You can wrap the video-container in a big container like this:

<div class="container">
  <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>

  </section>

  <section id="video-streams">
      <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>

  </section>

  <section id="video-streams">
      <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>
</div>

Then you can start styling from there