两个占父容器50%宽度的flex项设overflow-x:scroll后无法收缩

错误原因 #

1. 父容器的flex-none是核心问题：这个类会让容器拒绝任何收缩，直接被内部的超长文本撑大，导致子项的w-1/2是基于这个被撑宽的容器计算，完全偏离了你预期的“父级50%宽度”。
2. 仅加min-w-0不够：虽然这个类能打破flex项的最小宽度默认值，但没有明确锁定宽度占比的优先级，超长文本还是能突破宽度限制。

修复代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex w-full justify-center">
    <div class="flex w-full">
      <div class="flex-[0_0_50%] min-w-0 bg-[#4f4f61] py-8 text-white overflow-x-auto">Item A</div>
      <div class="flex-[0_0_50%] min-w-0 bg-[#a0cecd] py-8 overflow-x-auto whitespace-nowrap">
        Item BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
  </body>
</html>

关键调整说明 #

• 把父容器的flex-none换成w-full：让父容器继承body的宽度，确保子项的50%是基于页面的一半宽度计算。
• 用flex-[0_0_50%]代替w-1/2：这个样式等价于flex: 0 0 50%，直接锁定子项“不放大、不收缩、固定占父容器50%宽度”，彻底避免被内容撑开。
• 给项B加whitespace-nowrap：强制超长文本不换行，触发overflow-x-auto的横向滚动效果。

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