如何防止包含多图片的Flexbox超出容器高度？

我完全懂你的困扰——单行时图片太小看不清，换行后又直接溢出容器，调了半天Flex属性还是没搞定。咱们来一步步拆解问题，给出可行的解决方案：

问题根源分析 #

你当前的代码里，.box用了flex:1 1 auto，这里的flex-basis: auto意味着每个盒子的基础宽度是图片的原始尺寸（80px）。当容器宽度不够触发换行时，每行的盒子还是维持80px宽，而容器高度固定为100px，图片没法自动缩小适配行高，自然就溢出了。另外align-items: stretch没发挥作用，因为盒子本身没有被强制继承行的高度。

解决方案代码 #

直接看修改后的完整代码，我会逐行解释关键调整：

body, html { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  width: 300px; 
}
.container { 
  display: flex; 
  flex-flow: row wrap; 
  width: 100%; 
  height: 100px; 
  background: black;
  align-content: stretch; /* 确保每行拉伸填满容器高度 */
  align-items: stretch; /* 让每行内的盒子拉伸至行高 */
}
.box { 
  flex: 1 1 0; /* 关键：flex-basis设为0，让盒子按可用空间分配宽度 */
  display: flex; 
  justify-content: center; 
  height: 100%; /* 强制盒子继承行的高度 */
}
.box img { 
  object-fit: contain; /* 严格保持图片宽高比 */
  max-height: 100%; /* 限制图片最大高度为盒子高度 */
  width: auto; /* 宽度自动按比例适配 */
}

<div class="container">
  <div class="box"> <img src="http://placehold.it/80x80" alt=""> </div>
  <div class="box"> <img src="http://placehold.it/80x80" alt=""> </div>
  <div class="box"> <img src="http://placehold.it/80x80" alt=""> </div>
  <div class="box"> <img src="http://placehold.it/80x80" alt=""> </div>
  <div class="box"> <img src="http://placehold.it/80x80" alt=""> </div>
  <div class="box"> <img src="http://placehold.it/80x80" alt=""> </div>
</div>

关键调整说明 #

• flex:1 1 0：把flex-basis从auto改成0，让Flexbox忽略图片的原始宽度，根据容器可用空间分配每个.box的宽度，换行后每行的盒子会自动缩小适配。
• .box添加height:100%：强制每个盒子继承所在行的高度，给图片一个明确的高度限制基准。
• 图片设置max-height:100%+width:auto：确保图片按比例缩放，最大高度不超过盒子高度，既避免溢出，又严格保持宽高比。
• 容器的align-content: stretch：确保换行后的每行都填满容器的100px高度，不会出现行与行之间的空隙。

这样调整后，图片会自动根据容器宽度换行，并且每行的图片都会按比例缩小，刚好适配容器高度，完全不会溢出，同时单行状态下也能保证图片有足够的辨识度。

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