如何防止图片溢出Flex主容器？

问题核心是：图片自身的固有尺寸超过了flex子项的可用空间，且flex子项默认不会强制限制内部元素的尺寸，即便设置了flex:1，也只是分配容器的可用空间，但内部图片不会自动收缩适配。

解决方案 #

给主图所在的蓝色容器添加overflow-hidden，同时给图片设置object-cover（保持比例填充容器）或者max-h-full（让图片高度不超过容器）：

修改后的代码

<div class="p-2 lg:p-6 relative inset-0 overflow-y-auto min-w-0 flex flex-col w-full h-full">
  <div class="flex flex-row items-center justify-center w-full h-96 gap-x-1">
    <div class="bg-red-700 p-1 flex-1 h-full">
      <div class="flex flex-col h-full">
        <!-- 添加overflow-hidden，给图片加object-cover -->
        <div class="flex-1 bg-blue-400 p-1 overflow-hidden">
          <img class="w-full h-full rounded-lg shadow object-cover" src="https://via.placeholder.com/150x300" />
        </div>
        <div class="flex-1 bg-sky-600 p-1">asdwasdw</div>
      </div>
    </div>
    <div class="bg-primary-600 p-1 flex-1 h-full"></div>
    <div class="bg-alter-600 p-1 flex-1 h-full"></div>
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>

可选调整 #

如果希望图片完整显示（不裁剪），可以把图片的h-full object-cover换成max-h-full，这样图片会自动缩小到容器高度范围内，宽度自适应：

<img class="w-full max-h-full rounded-lg shadow" src="https://via.placeholder.com/150x300" />

原理说明 #

• overflow-hidden：强制限制flex子项的可视区域，超出部分隐藏，避免溢出父容器。
• object-cover：让图片按比例填充容器，裁剪超出部分，保证容器被填满且图片不变形。
• max-h-full：限制图片最大高度不超过容器高度，图片会等比例缩小，完整显示在容器内。

内容的提问来源于stack exchange，提问作者Isaías Orozco Toledo