Переполнение содержимого в контейнере страницы/области просмотра 100vh ⇐ CSS

[Anonymous]

Я пытаюсь создать макет с боковой панелью статической высоты и верхним меню. Проблема в том, что меню вверху выталкивает контент за пределы просмотра страницы. Содержимое не видно внизу. Я думаю, что решение может заключаться в том, чтобы уменьшить боковую панель до ее высоты, но я не знаю, как это сделать.
https://codesandbox.io/p/sandbox/ меню-макет-6sg8c7
#root {
display: flex;
height: 100vh;
flex-direction: column;
}

.main-menu {
width: 100%;
height: 40px;
flex-shrink: 0; /* without this, menu shrinks and the sidebar isn't pushed out of view */
background: green;
}

.content {
display: flex;
flex-grow: 1;
}

.sidebar {
width: 300px;
height: 100vh;
background: blue;
overflow-y: scroll;
}

.filler-content {
background: white;
height: 500px;
margin: 10px;
}

HTML




Box Element
Box Element
Box Element





Подробнее здесь: https://stackoverflow.com/questions/791 ... -container