flex布局中img设置flex-grow覆盖其他子元素问题咨询

问题根因 #

该问题的本质是flex布局中替换元素（如img）的默认min-height属性值为auto，这个规则会强制元素的最小高度等于自身原始内容高度，即便配置了flex-grow和flex-shrink属性，元素也无法收缩到小于自身原始高度的尺寸，所以当图片原始高度超过flex容器分配给它的空间时，就会挤压、覆盖下方的文本内容。

解决方案 #

无需固定图片高度，仅需要给作为flex子项的图片新增min-height: 0声明，同时可将flex-basis设置为0，让flex容器优先为文本分配它所需的高度，剩余所有空间自动分配给图片即可，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--mobile friendly-->
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <style>
        .it {
            display: flex;
            flex-direction: column;
            width: 100px;
            height: 100px
        }

        .it *:first-child {
            flex-grow: 1;
            flex-basis: 0; /* 分配空间时忽略元素原始尺寸 */
            min-height: 0; /* 允许元素收缩到小于原始高度 */
            background-color: pink;
        }

        .it img {
            object-fit: contain;
        }
    </style>
</head>
<body>
<div class="it">
    <img src="https://i.sstatic.net/rtDch.jpg"/>
    <div>text1</div>
</div>

<div class="it">
    <img src="https://i.sstatic.net/rtDch.jpg"/>
    <div>text2</div>
</div>
</body>
</html>

如果你的flex子项不仅有img还有其他类型元素，只需要给对应需要自动填充剩余空间的子项添加上述两个属性即可通用生效。

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