如何防止Flexbox容器内的元素高度被压缩

我搭建了一个基础的Flexbox布局，flex容器内上方是一个菜单，下方是图片容器。图片容器高度动态变化，会随图片高度（图片按比例、百分比宽度缩放）增大而扩展。尽管我给顶部菜单设置了height:50px，它仍会被下方容器挤占空间，请问如何阻止菜单高度被压缩？

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: lightblue;
}

.top-menu {
  height: 50px;
  width: 100%;
  background-color: orange;
}

.images-container {
  width: 50%;
  border: 2px dashed blue;
}

img {
  width: 100%;
  display: block;
}

html,
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

解决方案 #

问题根源是Flexbox的默认收缩规则：容器内子元素默认flex-shrink: 1，当容器空间不足时，子元素会自动缩小适配。你的菜单虽设了固定高度，但图片容器高度超出剩余空间时，菜单会被压缩。

只需给顶部菜单添加flex-shrink: 0，即可阻止它被压缩：

.top-menu {
  height: 50px;
  width: 100%;
  background-color: orange;
  flex-shrink: 0; /* 新增此行 */
}

也可以用flex属性简写，更简洁：

.top-menu {
  flex: 0 0 50px; /* 分别对应flex-grow:0、flex-shrink:0、flex-basis:50px */
  width: 100%;
  background-color: orange;
}

这样菜单会始终保持50px高度，图片容器将占据容器剩余全部空间；若要限制图片容器不超出视口，可给它添加overflow: auto来生成滚动条。

内容的提问来源于stack exchange，提问作者Busha Smith