Tailwind Flex容器X轴未出现滚动溢出，原因何在？

你的问题出在Tailwind中flex子元素默认启用flex-shrink: 1，当子元素总宽度超过容器时，会自动收缩以适应容器宽度，导致X轴无法触发滚动溢出。而原生CSS中若你曾给子元素设置过禁止收缩的属性，才会正常触发横向滚动。

解决步骤 #

• 给所有flex子元素添加flex-shrink-0类，禁止它们自动收缩，子元素会保持设置的固定宽度，总宽度超过容器后就会触发X轴滚动。
• 容器的overflow-auto会同时处理X轴和Y轴的溢出滚动，Y轴因子元素高度已超过容器，无需额外修改。

修改后的代码 #

<div class="flex h-[400px] w-[1000px] gap-24 overflow-auto">
  <div class="flex-shrink-0 h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="flex-shrink-0 h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="flex-shrink-0 h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="flex-shrink-0 h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="flex-shrink-0 h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
  <div class="flex-shrink-0 h-[600px] w-[500px] rounded-2xl bg-sky-300/40"></div>
</div>

修改后，容器的X轴和Y轴都会根据子元素尺寸触发滚动溢出，与预期效果一致。

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