I need a menu that stays fixed at a height of 100, stretching to accommodate its content. If the content exceeds the height of the menu, a scrollbar should appear within the menu without allowing it to grow beyond 100.
The page's content, on the other hand, can grow to any height, with a minimum height that stretches to match its parent's height. If the content grows beyond the space available, the default scrollbar should appear on the right side of the page.
Here is the HTML structure:
<div class="module">
<nav class="vertical-menu">
<header>
<h5>Menu</h5>
</header>
<div class="menu-links">
menu link<br/>
menu link<br/>
menu link<br/>
menu link<br/>
menu link<br/>
menu link<br/>
</div>
</nav>
<div class="page-content">
Some content<br/>
another line<br/>
another line<br/>
another line<br/>
another line<br/>
another line<br/>
another line<br/>
another line<br/>
another line<br/>
another line<br/>
another line<br/>
another line<br/>
</div>
</div>
And the corresponding CSS styles:
.module {
display: flex;
width: 100%;
height: 100%;
background-color: lightgray;
}
.vertical-menu {
margin: 10px 0;
width: 300px;
background-color: coral;
flex-shrink: 0;
align-items: stretch;
}
.vertical-menu h5 {
font-size: 23px;
padding: 10px 22px;
border-bottom: 2px solid black;
}
.page-content {
margin: 10px;
background: tomato;
flex-grow: 1;
}
Find the codepen example here.
I appreciate any assistance with resolving this issue.