I currently have a wrapper class that contains an expandable side menu and main content section positioned side by side. The side menu acts as a filter for the content displayed in the main area, but I am encountering an issue where the rows separate when there is less content/items than available space. I would like the rows to stay aligned with equal spacing between them regardless of the amount of content.
Is there a way to prevent the sidebar from affecting the layout of the main area, whether it is fully expanded or collapsed?
.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 styling */
.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">
<!-- video thumbnails template goes here -->
</main>
</div>
<!-- end of main-content-->
</div>
<!-- end of outer-wrapper-->