flex容器内div与img响应式换行异常问题求助

问题描述 #

我创建了一个display:flex容器，内部两个div各设50%宽度，期望屏幕宽度<800px时，它们自动换行并占满100%宽度。但实际运行后，小屏幕下图片确实占满100%，但第一个div直接隐藏，完全没触发换行效果。

原代码 #

CSS

#elegantImg{
    max-width: 100%;
    height: auto;
}

.elegant-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.col {
    position: relative;
    width: 50%;
    height: auto;
    overflow: hidden;
}

.background {
    background-color: #F6F4F1;
    height: 100%;
}

.col img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media screen and (max-width: 800px) {
    .col {
        width: 100%;
    }
}

HTML

<section>
    <div class="elegant-container">
        <div class="col">
            <div class="background"></div>
        </div>
        <div class="col">
            <img id="elegantImg" src="https://i.imgur.com/TVL0phR.png" alt="">
        </div>
    </div>
</section>

问题根源 #

第一个.col里的.background设置了height:100%，但父元素.col的height:auto，且.col内部没有实际内容，导致它的高度为0，视觉上就像“消失”了。另外，flex容器默认align-items: stretch，但因为第一个.col高度为0，换行后也看不到它的存在。

修复方案 #

这里提供最简便的修复方式：利用flex的对齐特性让两个.col高度一致，确保第一个.col的背景色正常显示，同时触发换行。

修改后的完整代码：

CSS

#elegantImg{
    max-width: 100%;
    height: auto;
}

.elegant-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch; /* 添加这行，让子元素高度一致 */
}

.col {
    position: relative;
    width: 50%;
    overflow: hidden; /* 去掉height:auto，由align-items控制高度 */
}

.background {
    background-color: #F6F4F1;
    height: 100%;
}

.col img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media screen and (max-width: 800px) {
    .col {
        width: 100%;
    }
}

HTML（无需修改）

<section>
    <div class="elegant-container">
        <div class="col">
            <div class="background"></div>
        </div>
        <div class="col">
            <img id="elegantImg" src="https://i.imgur.com/TVL0phR.png" alt="">
        </div>
    </div>
</section>

效果说明 #

• 大屏幕（≥800px）：两个.col各占50%宽度，高度由图片撑开，第一个.col的背景色填满整个高度；
• 小屏幕（<800px）：自动换行，每个.col占100%宽度，背景色和图片都正常显示。

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