flex三列布局下设置flex:0 0 60%的中间项图片溢出问题咨询

根因分析 #

该现象由两个默认规则共同导致：

• Flex项默认min-width属性值为auto，优先级高于你设置的flex: 0 0 60%，当子元素（大尺寸图片）宽度超出60%容器宽度时，中间列会被内容强行撑开，突破预设宽度限制
• <img>属于替换元素，未设置尺寸限制时会保持原始宽高渲染，2400px的原始宽度远大于常规视口下60%容器宽度，既会横向溢出列宽，也会按照原始宽高比同步撑高列的高度

修复步骤 #

依次添加以下样式即可彻底解决：

1. 给作为flex项的中间列添加min-width: 0，强制该元素遵守flex: 0 0 60%的宽度规则
2. 给中间列内的图片添加自适应样式，确保图片不会超出列的边界：

.middle-column img {
  max-width: 100%;
  height: auto; /* 保持图片原始宽高比自动缩放，避免变形 */
}

如果需要限制图片高度不超出容器高度，可额外补充以下样式：

.middle-column img {
  max-height: 100%;
  object-fit: cover; /* 可选，超出部分裁剪，保持图片比例不变 */
}

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