CSS：Flexbox布局中如何让图片不超出父容器分配的剩余高度

列方向Flex布局下，所有flex项目默认min-height: auto，即项目最小高度不会小于内部内容的固有尺寸。给图片容器设置flex:1时，一旦内部插入固有高度500px的图片，容器的实际最小高度会被拉伸到500px，直接挤占其他模块的空间，完全打破原本的剩余空间分配逻辑。

不需要为任意模块单独设置固定高度，仅需添加两组通用规则即可：

• 对设置了flex:1的图片承载容器，补充min-height: 0属性。该设置会取消flex项目自动适配内容大小的默认限制，让容器严格匹配Flex计算出的剩余空间高度，不会被内部内容随意撑开。
• 对容器内部的图片元素，补充max-height: 100%、width: auto属性。该设置会让图片自动等比缩放，最高值不会超过父容器的可用高度，完全适配容器尺寸。

<html><body>
    <div style="display: flex; flex-flow: column; height: 300px;">
        <div style="background: green;">HEADER</div>
        <div style="background: red;">CAPTION</div>
        <div style="background: blue;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div style="background: yellow; flex: 1; min-height: 0;">
            <img src="https://via.placeholder.com/100x500" style="max-height: 100%; width: auto;">
        </div>
        <div style="background: orange;">
            <button>ACTION</button>
        </div>
    </div>
</body></html>

这套方案无需为任意元素单独配置固定高度，即便实际场景中容器为弹性高度、内部承载内容尺寸不定，也能保持稳定的剩余空间分配逻辑，不会被内部图片的固有尺寸撑破布局。

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