React+Tailwind水平滚动卡片异常：卡片未滚动却自动收缩适配

核心原因 #

你用的flex布局容器，默认开启了flex-shrink: 1（子元素自动收缩）和flex-wrap: wrap（子元素换行适配），这两个属性共同导致卡片被挤压收缩，无法触发横向滚动。

修复方案 #

给滚动容器和卡片添加两个关键Tailwind类：

• 给滚动容器添加flex-nowrap：强制所有子卡片保持在同一水平行，禁止换行
• 给每个卡片添加flex-shrink-0：禁止卡片自动收缩，固定住你设置的w-72宽度

修改后的完整代码 #

<div className='w-5/6 h-64 mx-auto mt-24 mb-20'>
    <p className='h-12 text-xl font-medium ml-5 flex items-center drop-shadow-lg'>Animations</p>
    <div className='w-full h-48 flex flex-row flex-nowrap overflow-x-scroll scrollbar-hide'>
        <div className='bg-blue-300 h-full w-72 ml-4 rounded-md flex-shrink-0'></div>
        <div className='bg-blue-300 h-full w-72 ml-4 rounded-md flex-shrink-0'></div>
        <div className='bg-blue-300 h-full w-72 ml-4 rounded-md flex-shrink-0'></div>
        <div className='bg-blue-300 h-full w-72 ml-4 rounded-md flex-shrink-0'></div>
    </div>
</div>

补充说明 #

• 原代码里的bg-是无效的Tailwind类，建议直接删除
• 确保滚动容器的宽度设置正确（w-full），这样溢出的内容才会触发横向滚动

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