I'm trying to make a layout with a sidebar that expands to the full height of the content area without increasing the size of that content area flex container. The menu has a set height of 50px and .container element must fill the remaining vertical space.
Layout without Sidebar (no issue):
https://codesandbox.io/p/sandbox/n2nr3l
This is the layout without the sidebar which is working fine, it is a menu at the top with the content container underneath filling the viewport. Next I put the sidebar in the content container which causes it to expand vertically which is the problem. The expansion of the content container causes the 100vh page container to have a scrollbar.
Layout with the Sidebar (expanding issue):
https://codesandbox.io/p/sandbox/zg672p?file=%2Fstyles.css%3A24%2C16
HTML:
<div class="page"><div class="menu">menu</div><div class="container"><div class="main"></div><div class="sidebar"><div class="content-item"></div><div class="content-item"></div><div class="content-item"></div></div></div></div>CSS:
.page { display: flex; flex-direction: column; height: 100vh; background-color: orange;}.menu { width: 100%; height: 50px; background-color: lightblue; flex-shrink: 0;}.container { background-color: lightcoral; display: flex; flex-direction: row;}.sidebar { width: 300px; overflow-y: scroll;}.content-item { height: 400px; width: 90%; margin: 10px; background-color: white;}html,body { padding: 0; margin: 0;}The sidebar needs to fill the remaining free vertical space and use a vertical scrollbar rather than causing expansion.