为何按比例放大的图片会超出max-height限制并溢出容器？

这个问题的核心其实是flex布局中替换元素（图片）的尺寸计算逻辑和flex项的初始宽度优先级冲突导致的，我来帮你拆解清楚：

为什么会出现图片溢出？ #

当你给图片设置height: 100% + width: auto时，图片的宽度完全依赖于容器的高度；而图片容器（.image/.icon）作为flex项，它的高度又由整个flex容器的高度（被右侧文本内容拉伸）决定。这种循环依赖下，浏览器会优先采用图片的固有尺寸来计算容器的初始宽度，而不是根据图片缩放后的实际尺寸去调整容器宽度，这就导致了两种不同的表现：

• 当图片固有尺寸 < 设置的min/max-height时（比如你用的1x1像素图）：
  浏览器先把图片容器的宽度固定为图片的固有宽度（1px），然后图片被拉伸到max-height（4rem），此时width: auto本应让图片宽度同步变成4rem，但容器宽度已经被锁死，最终图片就溢出了容器。
• 当图片固有尺寸 > 设置的max-height时（比如80x80像素图）：
  图片容器初始宽度是图片的固有宽度（80px），图片被缩放到max-height对应的尺寸（比如64px），此时flex项默认的flex-shrink: 1会让容器自动收缩到图片缩放后的宽度（64px），所以看起来容器适配了图片。

至于垂直flex布局时文本容器溢出的问题，是因为切换到flex-direction: column后，交叉轴变成了水平方向，文本容器的宽度默认受限于flex容器的宽度（由图片宽度决定），无法自动扩展来容纳过长的文本内容。

解决办法 #

要打破这种循环依赖，让图片容器能够根据图片缩放后的尺寸自动调整宽度，只需要给图片容器添加以下CSS规则：

.image, .icon {
  width: fit-content; /* 让容器宽度适配内容（即图片缩放后的尺寸） */
  flex-shrink: 0; /* 防止容器被flex布局压缩 */
}

或者用flex属性简写，效果是一样的：

.image, .icon {
  flex: 0 0 fit-content; /* 不扩展、不收缩，宽度适配内容 */
}

如果是垂直flex布局的文本溢出问题，给文本容器添加flex-grow: 1让它占据剩余空间，再按需添加滚动条即可：

.copy {
  background: rgba(255,255,0,0.5);
  flex-grow: 1;
  overflow: auto; /* 可选，内容过多时显示滚动条 */
}

修改后的代码验证 #

以你最初的水平布局代码为例，修改后的完整代码如下：

main { display: flex; background: rgba(0,255,255); }
.image { 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  width: fit-content;
  flex-shrink: 0;
}
img { display: block; height: 100%; min-height: 3rem; max-height: 4rem; width: auto; background: rgba(255,0,255,0.5); }
.copy { background: rgba(255,255,0,0.5); }

<main>
 <div class="image">
 <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png"/>
 </div>
 <div class="copy">
 blah<br>
 blah<br>
 blah<br>
 blah<br>
 blah
 </div>
</main>

这样无论右侧文本内容多高，图片容器都会自动调整宽度适配图片，再也不会出现溢出问题了。

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