100vh 弹性容器中 Div 高度缩小

Question

我已将

height

元素的

main-menu

设置为 40px，为什么

content

元素会增加其垂直尺寸并占用菜单空间？

#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

当浏览器窗口较窄时，菜单可见，当浏览器窗口变宽时，菜单不可见。

较小的浏览器窗口宽度：

更多宽度：

我发现为

height

设置最小高度而不是

.main-menu

可以解决问题，但我不明白为什么使用高度不起作用。

Answer 1

为主菜单设置最小高度可以防止同级元素在其上方溢出，因为它们都是 Flex 项目，并且 Flex 项目默认具有

min-height: auto

。这意味着它们的最小高度取决于其内容当前的显示方式。侧边栏中的图像随视点增长，增加其有效最小高度，但主菜单没有内容，因此其最小高度实际上为 0，直到您使用 CSS 设置或向其添加内容。