为何图片无法填充Flex容器右侧剩余空间？问题解析

先看你当前的代码问题：

<div class="second-part">
    <h2>This website is awesome</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam, aut natus? Voluptate vel delectus ipsum unde maxime facere aliquid reiciendis quia est enim ducimus magni deleniti repudiandae eveniet, cumque quis.</p>
    <div>
        <button class="btn">Sign up</button>
    </div>
</div>
<div class="right-img">
    <img src="https://images.pexels.com/photos/6194848/pexels-photo-6194848.jpeg?auto=compress&cs=tinysrgb&w=400" alt="brittany spaniel in forest looking at the sky">
</div>

.second-part {
    display: flex;
    align-items: left; /* 这里注意：left不是合法值，应该用flex-start */
    margin-left: 200px;
    flex-direction: column;
    max-width: 40%;
}

核心原因 #

1. .second-part是块级元素：哪怕给它加了display:flex，但flex-direction:column只是控制它内部元素的排列方向，它自身作为块级元素，默认会独占父容器的整行宽度，导致后面的.right-img只能换行到下方，根本没法和它在同一行布局。
2. 没有统一的flex父容器：你想让两个div左右并排，需要给它们共同的父容器设置display:flex，这样两个子元素才能横向分配空间。

解决方法 #

给两个div套一个父容器，设置flex布局，再调整子元素的空间分配：

修改后的代码 #

<!-- 新增父容器 -->
<div class="content-container">
    <div class="second-part">
        <h2>This website is awesome</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam, aut natus? Voluptate vel delectus ipsum unde maxime facere aliquid reiciendis quia est enim ducimus magni deleniti repudiandae eveniet, cumque quis.</p>
        <div>
            <button class="btn">Sign up</button>
        </div>
    </div>
    <div class="right-img">
        <img src="https://images.pexels.com/photos/6194848/pexels-photo-6194848.jpeg?auto=compress&cs=tinysrgb&w=400" alt="brittany spaniel in forest looking at the sky">
    </div>
</div>

.content-container {
    display: flex;
    margin-left: 200px; /* 把margin移到父容器，避免.inner-part的margin影响布局 */
    gap: 20px; /* 可选，给两个模块加间距 */
}

.second-part {
    display: flex;
    flex-direction: column;
    max-width: 40%; /* 保持你原来的宽度限制 */
    align-items: flex-start; /* 修正原来的left错误值 */
}

.right-img {
    flex: 1; /* 让这个容器占据剩余所有空间 */
}

.right-img img {
    width: 100%; /* 图片填满容器 */
    height: auto; /* 保持图片比例 */
}

效果说明 #

• 父容器content-container设为flex后，.second-part和.right-img会横向排列；
• .right-img的flex:1会自动填充.second-part之外的所有剩余宽度；
• 图片设置width:100%后，会完全填满.right-img容器，实现你要的右侧占满剩余空间的效果。

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