flex-direction为column时flex-grow布局下图片溢出问题求助

我懂你碰到的这个麻烦——本来用Flex好好把页面分成2/3和1/3的两行，结果一放图片就直接撑破布局，滚动条也冒出来了。这事儿其实是Flex容器的默认特性加上图片的尺寸规则在搞鬼，咱们来改一下：

问题根源 #

你的第二行父容器设置了flex:1，但Flex项目默认的min-height:auto会让它被内部内容（也就是图片）的高度撑开，完全忽略你原本分配的1/3高度。再加上你给图片只设了height:100%，图片会硬保持自身宽高比，宽度溢出后就把整个布局带崩了。

修复方案 #

给图片的父容器加两个关键属性，再调整图片的样式：

• 给第二行的红色容器添加min-height:0——强制它遵守Flex分配的高度，不被内容撑开
• 给容器加overflow:hidden——防止图片溢出后破坏布局
• 调整图片样式，让它在容器内自适应：width:100%; height:100%; object-fit:cover;（object-fit:cover会保持比例并填满容器，也可以用contain让图片完整显示）

修改后的完整代码 #

* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; height: 100%; display: flex; flex-flow: column; }
.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选替换为contain，让图片完整显示 */
}

<body style="background: blue;">
  <div class="d-flex flex-col" style="background: yellow; flex-grow: 1">
    <div style="flex-grow: 2;">
      <p>Some text, should take 2/3 of the layout</p>
    </div>
    <div style="flex: 1; background: red; min-height: 0; overflow: hidden;">
      <img src="https://i.imgur.com/llyPMGV.jpg" />
    </div>
  </div>
</body>

另一种可选方案（用Flex容器包裹图片） #

你也可以把图片的父容器改成Flex容器，让图片自动居中并适配：

<div style="flex: 1; background: red; display: flex;">
  <img src="https://i.imgur.com/llyPMGV.jpg" style="object-fit: cover; flex-shrink: 0;" />
</div>

这种方式下，Flex容器会自动约束图片的尺寸，加上flex-shrink:0防止图片被压缩变形，同样能解决溢出问题。

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