如何让CSS父容器中中间子元素占据剩余高度？

问题出在两个核心点：

• 上下的宽图默认会被flex容器压缩（flex-shrink默认值为1），无法保持自身宽高比的自适应高度
• 中间长图使用flex-grow:1时，未限制尺寸超出剩余空间，且图片缩放规则未调整，导致不符合预期

修正后的完整代码 #

HTML（无需修改）

<div class="parent">
   <img class="wide" src="wide.png">
   <img class="tall" src="tall.png">
   <img class="wide" src="wide.png">
</div>

CSS

.parent {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 200px;
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0),
        rgba(255, 0, 0, 0.4) 20px
    );
    border: 1px solid black;
}
.wide {
    width: 100%;
    flex-shrink: 0; /* 阻止宽图被压缩，保持宽高比自适应高度 */
}
.tall {
    flex-grow: 1; /* 自动填充父容器减去上下宽图后的剩余高度 */
    max-height: 100%; /* 限制长图高度不超过分配到的空间 */
    width: 100%; /* 适配父容器宽度 */
    object-fit: contain; /* 保持图片比例，完整显示在容器内 */
    /* 若需要图片填满容器并裁剪多余部分，替换为 object-fit: cover; */
}

关键属性解释 #

• flex-shrink: 0：给上下宽图添加这个属性，避免flex容器在空间不足时压缩它们的高度，确保宽图根据自身宽高比自动计算高度。
• flex-grow: 1：让中间长图占据父容器减去上下宽图高度后的所有剩余空间，无需硬编码数值，适配父容器尺寸变化。
• max-height: 100%：配合flex-grow，确保长图不会超出分配到的剩余高度范围。
• object-fit: contain：保证长图在指定尺寸内保持原有比例，不会被拉伸变形；如果需要图片完全覆盖容器区域，可改用object-fit: cover。

这样设置后，无论父容器的宽高如何调整，上下宽图都会自适应宽度并维持比例高度，中间长图自动填充剩余空间且保持图片原有比例。

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