Элемент Flexbox не заполняет оставшееся пространство в контейнере страниц размером 100vh ⇐ CSS

[Anonymous]

У меня есть макет с контейнером страницы flexbox размером 100vh, в котором заключено верхнее меню и контейнер. Я пытаюсь заставить элемент-контейнер заполнить оставшееся вертикальное пространство под меню, но не знаю, как это сделать.
https://codesandbox.io/p/sandbox/ n2nr3l
HTML

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

menu

CSS

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

.page {
display: flexbox;
flex-direction: column;
height: 100vh;
background-color: orange;
}

.menu {
width: 100%;
height: 50px;
background-color: lightblue;
}

.container {
background-color: lightcoral;
display: flex;
flex-direction: row;
/* need to make container use remaining height of .page */
flex-grow: 1;
}

html,
body {
padding: 0;
margin: 0;
}

Это две вертикально расположенные строки в контейнере flexbox, меню и контейнере, который должен расширяться до нижней части страницы.

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