My side nav and main content are both dynamic. The issue arises when the navigation is longer than the main content, causing its height to be set to the viewport height and the rest is hidden. How can I address this problem without resorting to an unsightly scrollbar on the navigation?
I'm looking for a way to keep the navigation fixed in place.
section {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
nav {
-webkit-box-flex: 0;
-webkit-flex: 0 0 250px;
-ms-flex: 0 0 250px;
flex: 0 0 250px;
}
nav ul {
position: fixed;
}
main {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}<section>
<nav>
<ul>
<!-- Inserted shortened list here -->
<li>51</li>
<li>52</li>
<li>53</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tenetur tempore voluptatum quasi architecto accusamus sapiente quaerat sequi ratione optio eos, accusantium corrupti dolor aliquid similique culpa libero officiis atque?</p>
</main>
</section>