I have a layout with a 100vh flexbox page container wrapping a top menu and a container. I'm trying to get the container element to fill the remaining vertical space under the menu but I don't know how to.
https://codesandbox.io/p/sandbox/n2nr3l
HTML
<body><div class="page"><div class="menu">menu</div><div class="container"><div class="sidebar"></div><div class="main"></div></div></div></body>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;}It is 2 vertically stacked rows in a flexbox container, menu and the container which must expand to the bottom of the page.