Предотвращение расширения гибкого контейнера - заполнение вертикального пространства ⇐ CSS

[Anonymous]

Я пытаюсь создать макет с боковой панелью, которая расширяется на всю высоту области содержимого, не увеличивая при этом размер гибкого контейнера области содержимого. Заданная высота меню составляет 50 пикселей, а элемент .container должен заполнять оставшееся вертикальное пространство.
Макет без боковой панели (нет проблем):< /p>
https://codesandbox.io/p/sandbox/n2nr3l
Это макет без боковой панели, который работает нормально, это меню вверху, а контейнер содержимого внизу заполняет область просмотра. Затем я помещаю боковую панель в контейнер контента, что приводит к ее вертикальному расширению, и это проблема. При расширении контейнера содержимого в контейнере страницы размером 100vh появляется полоса прокрутки.
Макет с боковой панелью (проблема с расширением):
https://codesandbox.io/p/sandbox/zg672p ... %3A24%2C16
HTML:

Код: Выделить всё

menu

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;
}

Боковая панель должна заполнять оставшееся свободное вертикальное пространство и использовать вертикальную полосу прокрутки, а не расширяться.

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