Div with 100vh expands to size outside viewport [closed]

Why is #root expanding outside of the viewport height? How do I get #root to remain at the height of the viewport?

https://codesandbox.io/p/sandbox/flexbox-vert-fill-klc5v6?file=%2Findex.html%3A1%2C1-82%2C1

#root {  display: flex;  height: 100vh;  flex-direction: column;}.main-menu {  width: 100%;  height: 40px;  flex-shrink: 0;  background: green;}.content {  display: flex;  flex-grow: 1;}.sidebar {  flex-grow: 1;  flex-basis: 0;  height: 100%;  border-right: 1px solid darkgrey;  overflow-y: scroll;}