flex容器内img设置flex-grow填充剩余空间导致内容溢出如何解决

原因说明 #

• img是替换元素，自带固有原始尺寸，Flex布局中所有flex项的主轴方向最小尺寸默认值为auto：对于替换元素而言，这个值等于它的固有内容高度，也就是说默认情况下img不会被压缩到比自身原始高度更小。
• 你使用的原图高度远大于容器（含边框总高110px），img不会主动收缩，自然就把下方的文本挤出了容器范围。
• 普通div没有固有内容尺寸，min-height: auto的实际表现为0，flex布局可以正常计算剩余空间并拉伸/压缩div，不会出现溢出。

修复方案 #

给img新增min-height: 0覆盖默认的最小高度限制即可，修改后的样式代码如下：

.c img {
    flex-grow: 1;
    object-fit: contain;
    min-height: 0; /* 新增该行解除高度限制 */
    width: 100%; /* 可选添加，避免图片宽度超出容器 */
}

修改后布局会优先计算文本的占位高度，剩余空间全部分配给img，img会按照object-fit: contain的规则自适应缩放展示，不会把文本挤出容器。

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