Flex布局中无法设置img元素为20rem宽度的问题咨询

在Flex容器中，你设置的图片宽度没生效主要有两个核心原因：一是grow类会强制Flex项自动占据剩余空间，和你设置的固定宽度直接冲突；二是Flex项默认的flex-shrink:1属性，会在容器空间不足时自动压缩图片，导致宽度无法保持设定值。

你可以按以下方式修改代码解决问题：

• 移除grow类：彻底消除它对固定宽度的干扰
• 添加flex-shrink-0：禁止图片被压缩，确保宽度严格遵循设置值
• 保留max-w-none：取消Tailwind默认给图片添加的max-width:100%限制，避免它约束图片宽度

修改后的完整代码：

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

<div class="container mx-auto my-4">
  <div class="border border-black-500 flex gap-4 p-4 w-full">
    <img class="flex-shrink-0 border border-black-500 max-w-none rounded w-[20rem]" src="https://i.imgur.com/CCAN5zY.png"/>
    <div class="border border-black-500 p-4 rounded w-full">some words</div>
  </div>
</div>

如果更倾向于用basis属性定义宽度，也可以替换成下面的写法，效果完全一致：

<img class="flex-shrink-0 border border-black-500 max-w-none rounded basis-[20rem]" src="https://i.imgur.com/CCAN5zY.png"/>

内容的提问来源于stack exchange，提问作者Gea-Suan Lin