Tailwind CSS Flex容器卡片X轴溢出滚动失效问题求助

问题出在absolute定位的flex容器没有限制宽度，导致容器宽度完全被卡片撑开，无法触发横向滚动。只需要给flex容器添加左右定位，让它的宽度被限制在视口范围内即可：

修改App.js中的flex容器类：

<div className="absolute top-1 left-1 right-1 flex flex-row flex-grow-0 overflow-x-auto justify-items-start align-middle gap-1 ">
  <Card />
  <Card />
  <Card />
  ...
</div>

关键修改点： #

• 添加left-1和right-1：让容器左右边距与父元素的p-1对应，宽度被限制在视口内（减去左右各1单位的边距）
• 将overflow-auto改为overflow-x-auto：明确只在X轴方向触发滚动，避免不必要的垂直滚动

如果需要容器占满整个视口宽度（去掉边距），可以改成left-0 right-0，同时注意父元素的padding是否会影响布局。

原理：absolute定位的元素默认宽度由内容决定，只有当容器宽度小于子元素总宽度时，overflow-x:auto才会生效。通过设置left/right属性，强制容器宽度适配父元素的可用空间，这样卡片总宽度超出时就会显示横向滚动条。

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