如何解决Tailwind CSS中等尺寸盒子横向滚动失效问题？

问题核心：

• 未加flex时，子元素是块级元素默认垂直排列，overflow-x-auto仅处理横向溢出但不改变布局方向
• 加flex后，Flexbox默认让子元素收缩适配容器，且默认换行，导致盒子被压缩、无法触发横向滚动

正确实现需满足三个条件：

1. 父容器用flex设置横向布局
2. 父容器加flex-nowrap强制子元素不换行
3. 子元素加flex-shrink-0禁止收缩，保留固定尺寸

修改后的代码：

<div className="overflow-x-auto p-5 gap-5 flex flex-nowrap">
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
  <div className="bg-orange-700 w-[300px] h-[300px] flex-shrink-0"></div>
</div>

关键类作用： #

• flex：将容器设为Flex布局，子元素横向排列
• flex-nowrap：强制子元素不换行，超出容器宽度时触发横向溢出
• flex-shrink-0：禁止子元素收缩，保证w-[300px]宽度生效
• overflow-x-auto：子元素总宽度超出容器时，显示横向滚动条

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