css - Flexbox and expandable/accordion side menu Issue

Question

I currently have a wrapper class in which I have an expandable side menu and main content section side by side. The side menu is a checkbox which filters the content within the main area but I'm noticing that when the content/items is less than the area, the rows separate but I need them to stay in their normal flex start with equal gapping between rows.

Is there a way to keep the main area unaffected by the sidebar regardless if it's fully expanded or contracted?

.main-content {
  display: flex;
}

.outer-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  justify-content: start;
  width: 100%;
  height: 100%;
}

.main_gallery {
  width: 80%;
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0;
}

a {
  text-decoration: none;
}


/* side bar section */

.side-bar {
  margin-top: .6rem;
  flex: 0 0 12em;
  min-height: 0em;
}

ol {
  list-style-type: none;
  padding-left: 0;
  font-size: .8em;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 12rem;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: rgb(255, 255, 255);
  display: none;
  overflow: hidden;
  text-align: left;
}

<div class="outer-wrapper">
  <div class="main-content">
    <!-- side bar -->
    <div class="side-bar">
      <button class="accordion">Misc.</button>
      <div class="panel">
        <ol>
          <li>
            <input type="checkbox" category="misc" id="demo reel,reel"> Demo Reel
          </li>
          <li>
            <input type="checkbox" category="misc" id="promo"> Promo
          </li>
          <li>
            <input type="checkbox" category="misc" id="setup,set up"> Setup
          </li>
          <li>
            <input type="checkbox" category="misc" id="settings"> Settings
          </li>
          <li>
            <input type="checkbox" category="misc" id="training,webinar"> Training
          </li>
        </ol>
      </div>
    </div>
    <!-- end of side-bar-->
    <main class="main_gallery">
      <!-- template video thumbnails go here -->
    </main>
  </div>
  <!-- end of main-content-->
</div>
<!-- end of outer-wrapper-->

Answer 1

So I added this line of code align-content: flex-start; to my .main_gallery class in css and fixed my issue. There are no more gaps between rows and any amount of video thumbnails are aligning from the top down. Hopefully this will help other newbies like me should they run into the same issue.