Flex属性未正常工作排查：屏幕缩小时内容Div占满宽度而图片Div被压缩的原因

你遇到的问题核心在于flex容器的子项没有配置合理的flex属性，导致在屏幕尺寸接近断点（600px）时，#content和#image无法自动均分容器空间。

具体原因： #

• 你的#card作为flex容器，默认子项的flex-grow值为0（不会主动扩张填充空间）、flex-shrink值为1（空间不足时会被压缩）。
• #image仅设置了max-width: 600px，没有配置flex分配规则；而#content无任何宽度限制，容器空间变化时，#content会优先占据可用空间，#image则被挤压缩小。

修复方案： #

给#image和#content添加flex属性，让它们按比例分配容器空间，同时设置最小宽度避免过度压缩。

修改后的媒体查询CSS代码：

@media (min-width: 600px) { 
    #card { 
        display: flex; 
        max-width: 1200px; 
        flex-direction: row-reverse; 
        height: 400px; 
        margin: 10rem auto; 
    } 
    #content { 
        flex: 1 1 50%; /* 允许扩张/收缩，基础宽度占容器50% */
        margin: 40px; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        text-align: left; 
        min-width: 300px; /* 防止内容被过度压缩 */
    } 
    #image { 
        flex: 1 1 50%; /* 和content均分容器空间 */
        height: 400px; 
        max-width: 600px; 
        border-bottom-right-radius: 15px; 
        border-top-left-radius: 0px; 
        background-size: cover; /* 确保背景图始终覆盖容器 */
        min-width: 300px; /* 防止图片容器被压得太小 */
    } 
    .overlay { 
        border-bottom-right-radius: 15px; 
        border-top-left-radius: 0; 
    } 
    .stats { 
        display: flex; 
        gap: 5rem; 
        margin: 0; /* 移除auto，避免内容居中偏移 */
    } 
    p { 
        margin-bottom: 30px; 
    } 
    #heading { 
        margin-left: 0; /* 移除不必要的margin，保持内容对齐 */
    } 
    #para { 
        margin-top: 20px; 
        margin-left: 0; /* 消除和content margin的冲突 */
    }
}

额外优化说明： #

• 通过flex: 1 1 50%让两个子项均分容器空间，同时支持在空间充足时扩张、空间不足时按比例收缩。
• 设置min-width确保在屏幕接近600px断点时，内容和图片容器都不会被压缩到影响视觉体验的程度。
• 调整内边距和外边距，避免flex布局下的元素对齐混乱。

修改后，当屏幕宽度≥600px时，#content和#image会始终合理分配容器空间，不会出现其中一个被过度压缩的情况。

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