I have set the height of the main-menu element to 40px, why does the content element increase it's vertical size and take the menu's space?
#root { display: flex; height: 100vh; flex-direction: column;}.main-menu { width: 100%; height: 40px; background: green;}.content { display: flex; flex-grow: 1;}.sidebar { flex-grow: 1; flex-basis: 0; height: 100%; border-right: 1px solid darkgrey;}https://codesandbox.io/p/sandbox/flexbox-vert-fill-klc5v6?file=%2Fstyles.css%3A9%2C3
When the browser window is less wide, the menu is visible and it is not visible when it becomes wide.
Less browser window width:
More width:
I found that setting the min-height rather than height for .main-menu fixes the problem but I don't understand why using height doesn't work.