Flex布局中如何仅让单个元素伸缩？图片引发高度异常问题

问题场景 #

设置了高度为100dvh的垂直flex容器，内部包含5个宽度100%的行元素：其中4行高度固定，main-section通过flex:1设置为占据剩余空间，目标是无需滚动即可显示全部内容。但添加图片后main-section高度超出预期，移除图片则恢复正常。

原因分析 #

1. Flex子项的默认最小高度限制：Flex容器的子项默认min-height:auto，这意味着子项的高度至少要能容纳内部内容。当main-section中的图片高度超过了flex:1分配的剩余空间时，min-height:auto会强制main-section被图片撑开，导致整个容器高度超出100dvh。
2. 图片未限制高度：仅给图片设置width:100%和object-fit:cover，但未指定高度，图片会保持原始宽高比渲染，其高度可能超过main-section的可用空间，进一步触发上述的最小高度限制。

解决方案 #

步骤1：打破Flex子项的最小高度限制 #

给main-section添加min-height:0，让它能够被flex:1正确约束在分配的剩余空间内：

.main-section {
  background-color: aquamarine;
  padding: 2rem;
  width: 100%;
  flex: 1;
  min-height: 0; /* 新增：取消默认最小高度限制 */
}

步骤2：让图片填满容器空间 #

给图片设置height:100%，配合object-fit:cover实现图片自适应填满main-section的可用空间：

.main-section img {
  object-fit: cover;
  width: 100%;
  height: 100%; /* 新增：让图片高度填满容器 */
}

调整后，main-section会严格占据容器的剩余空间，图片也会自适应该空间，整个布局将保持在100dvh内，无需滚动即可显示全部内容。

内容的提问来源于stack exchange，提问作者francesco.venica