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.