.header__img元素flex设置下内容溢出原因及解决方法咨询

发现.header__img类的flex属性指定长度外存在额外区域，请问该情况产生的原因是什么？是否可以让内容完全处于flex容器内？

相关代码 #

HTML代码 #

<header class="header">
    <div class="header__container _container">
        <a href="" class="header__logo">
            <div class="header__img"><img src="../static/goal.png" alt="Goal"></div>
            <div class="header__text">HireUs</div>
        </a>
        <nav class="header__menu menu">
            <ul class="menu__list">
                <li class="menu__item"><a href="" class="menu__link menu__link-insurance">Health Insurance</a>
                </li>
                <li class="menu__item"><a href="" class="menu__link menu__link-post">Post A Job</a></li>
                <li class="menu__item"><a href="" class="menu__link menu__link-login">Log In</a></li>
            </ul>
        </nav>
    </div>
</header>

SCSS代码 #

.header {
    &__container {
        display: flex;
        align-items: center;
        min-height: 140px;
        justify-content: space-between;
    }

    &__logo {
        display: flex;
        align-items: center;
    }

    &__img {
        flex: 0 0 50px;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    &__text {
        color: $fontColor;
        font-size: 30px;
        font-weight: 900;
        margin: 0px 0px 0px 5px;
    }

    &__menu {
    }
}

显示效果 #

原因分析 #

• .header__img设置了flex: 0 0 50px固定宽度，但未指定高度，它的父容器.header__logo是flex容器且设置了align-items: center，而父容器的高度由上层.header__container的min-height:140px撑开，导致.header__img被拉伸到140px高，远大于图片本身尺寸，视觉上就出现了“额外区域”。
• 内部的img被设置为position:absolute，脱离了文档流，无法撑开.header__img的高度，使得.header__img的高度完全由父容器的拉伸决定，进一步加剧了这个问题。

解决方法 #

完全可以让内容处于flex容器内，以下是两种可行方案：

方案一：给.header__img设置固定高度 #

直接给.header__img添加height:50px，让它的宽高都固定为50px，和flex指定的宽度匹配：

.header__img {
    flex: 0 0 50px;
    height: 50px; // 新增固定高度
    position: relative;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
}

方案二：移除img的绝对定位，让图片自然撑开容器 #

如果不需要绝对定位，去掉position:absolute及相关属性，让图片按比例撑开.header__img的高度：

.header__img {
    flex: 0 0 50px;
    position: relative;
    img {
        width: 100%;
        height: auto; // 改为auto保持图片比例
        object-fit: cover;
        // 移除position:absolute、top、left属性
    }
}

这种方式下，.header__img的高度会和图片高度一致，不会被父容器过度拉伸，同时保持指定的50px宽度。

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