防止 Flexbox 容器中的元素高度收缩

Question

我有一个带有 Flex 容器的基本 Flexbox 布局，在 Flex 容器内，顶部有一个菜单，下面有一个图像容器。图像的容器具有动态高度，它会增加其垂直尺寸以适应图像，由于图像具有长宽比和百分比宽度，因此会增加其高度。即使我将

height

设置为 50 像素，菜单下方的容器也会增加其大小并占用菜单空间。如何防止菜单缩小？

.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+ */
}

代码沙箱： https://codesandbox.io/p/sandbox/image-container-wjw2ld

Answer 1

设置

flex-shrink: 0

（默认为1）以防止其高度减小。