Tailwind Flexbox左侧固定40px双列布局：文本溢出致宽度被压缩的解决方案

你的问题源于Flex容器的默认行为：Flex子项默认带有flex-shrink: 1属性，当容器空间不足时，子项会自动收缩以适配剩余空间，这就导致左侧设置了固定宽度的Div在右侧文本溢出时被挤压变形。

解决方法 #

给左侧Div添加flex-shrink-0类，禁用它的收缩特性，确保宽度始终维持40px（对应Tailwind的w-10）。如果需要优化右侧文本的溢出显示，还可以给右侧Div添加文本溢出控制类：

修改后的JSX代码：

<div className="flex">
     <div className="flex w-10 h-10 items-center justify-center flex-shrink-0">
          a
     </div>
     <div className="flex bg-red overflow-hidden text-ellipsis whitespace-nowrap">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda atque, cumque illo ipsam itaque iure iusto nam officia reiciendis vero.
     </div>
</div>

原理说明 #

• flex-shrink-0：对应CSS的flex-shrink: 0，强制左侧子项不参与收缩，固定宽度不会被挤压。
• overflow-hidden+text-ellipsis+whitespace-nowrap：用于控制右侧文本溢出时的显示效果，避免文本无限制撑开容器（可选，根据实际需求调整）。

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