设置flex-wrap: wrap后子元素未换行反而重叠的问题排查

提供的HTML代码 #

<section class="about-us" id="about-us">
    <div class="abtus-img">
        <img src="/images/about-us.jpeg" alt="Patricia and Midel">
    </div>
    <div class="content">
        <div class="abtus-text">
            <h3>Today is God's</h3>
            <h3>Unfailing faithfulness</h3>
            <h3>WE</h3>
        </div>
        <div class="main-text">
            <h1>Name</h1>
            <p>and</p>
            <h1>Name</h1>
        </div>
        <div class="info">
            <div class="info-p">
                <p>Invite you to share the beginning of our new life together as we unite and make our blessed commitment to God and to each other in Holy Sacrament of Matrimony
                </p>
            </div>
            <div class="main-info"></div>
        </div>
    </div>
</section>

对应的CSS代码 #

main .about-us {
    display: flex;
    width:90%;
    height:70vh;
    border-bottom: 2px solid black;
    margin-bottom: 2em;
    flex-wrap: wrap;
}

main .about-us .abtus-img {
    width:60%;
    border-right: 1px solid black;
    display: flex;
    justify-content: center;
    align-self: center;
}

main .about-us .abtus-img img {
    height:40em;
    width:30em;
}

main .about-us .content {
    width:40%;
    height:50%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 2em;
    justify-content: space-evenly;
}

main .about-us .content .main-info {
    width:60%;
    margin-top: 2em;
}
main .about-us .content .info {
    margin-top: 1em;
}

main .about-us .content .main-text {
    margin-top: 2em;
    line-height:3.5em;
}
main .about-us .content .main-text h1 {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 2.2em;
}

main .about-us .content .main-text p{
    font-family: 'Dancing Script', cursive;
    font-size: 1.3em;
}

问题描述 #

给父容器.about-us设置了flex-wrap: wrap，但调整窗口大小时，子元素并未换行，反而出现重叠。尝试过调整子元素宽度、移除flex gap等操作，均无法解决问题，需要原因排查及解决方法。

原因排查 #

• 父容器固定高度限制：.about-us设置了height:70vh，当窗口缩小触发换行时，固定高度无法容纳换行后的子元素，导致元素被挤压重叠。
• 图片固定尺寸不自适应：.abtus-img img使用固定的height:40em和width:30em，窗口缩小时图片不会自动缩小，会撑破容器或与其他元素重叠。
• 子元素宽度+边框超出100%：.abtus-img占60%宽度且带有border-right:1px solid black，边框未计入宽度计算，导致子元素总宽度超过容器100%，触发溢出而非换行。

解决方法 #

1. 移除父容器固定高度，改用最小高度
   让容器能根据子元素高度自动扩展，给换行后的元素留出纵向空间：

main .about-us {
    display: flex;
    width:90%;
    min-height:70vh; /* 替换原固定height */
    border-bottom: 2px solid black;
    margin-bottom: 2em;
    flex-wrap: wrap;
}

2. 设置图片自适应尺寸
   用max-width和max-height限制图片最大尺寸，同时保持宽高比自适应：

main .about-us .abtus-img img {
    max-height:40em;
    max-width:100%; /* 不超出父容器宽度 */
    height: auto; /* 保持宽高比 */
}

3. 让边框计入子元素宽度
   添加box-sizing: border-box，使边框包含在子元素的百分比宽度内，避免总宽度超100%：

main .about-us .abtus-img {
    width:60%;
    border-right: 1px solid black;
    box-sizing: border-box; /* 边框计入宽度 */
    display: flex;
    justify-content: center;
    align-self: center;
}

4. 添加媒体查询优化小屏布局
   当窗口宽度小于阈值时，强制两个子元素占满100%宽度，确保换行并调整分隔样式：

@media (max-width: 768px) {
    main .about-us .abtus-img,
    main .about-us .content {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid black;
        padding-bottom: 1em;
        margin-bottom: 1em;
    }
}

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