如何在Tailwind CSS中实现div内部内容自动调整大小适配容器

该需求完全可以实现，当前图片溢出是flex布局默认特性、类名拼写错误、缺少图片宽高限制规则共同导致的，修改方案如下：

调整要点 #

• 修正img类名拼写错误：将写错的h-autho改为h-auto
• 给每个img添加min-w-0类：flex布局下子元素默认min-width为auto，内容超出时不会自动收缩，添加该属性后即可支持自动收缩
• 给每个img添加max-w-full和object-contain类：限制图片最大宽度不超过父容器，同时保持图片原有的宽高比例，完整显示不会变形或被裁切

修改后完整代码 #

<div class="container h-auto">
  <div class="flex border-8 border-red-900 w-56 h-auto">
    <img class="h-auto w-auto min-w-0 max-w-full object-contain" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
    <img class="h-auto w-auto min-w-0 max-w-full object-contain" src="https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
  </div>
</div>

修改后两张图片会自动平分外层flex容器的可用宽度，始终完整适配容器边界，不会出现溢出问题。

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