Tailwind CSS中overflow-x-auto不生效：卡片内文本无法横向滚动

你的横向滚动不生效的核心原因是：包裹滚动容器的relative父元素没有明确的宽度约束，导致它会跟着内部的长文本无限拉伸，滚动容器自然不会触发横向滚动。

直接修改代码即可解决：

1. 给relative的div添加w-full类，让它继承父级（Card）的宽度，为内部滚动容器提供明确的边界；
2. 滚动容器的max-w-full可以换成w-full，确保它完全填充父容器宽度。

修改后的完整代码：

function InfoItem({ label, value }: { label: string; value: string }) {
  return (
    <div className="space-y-1">
      <p className="text-sm font-medium leading-none text-muted-foreground">{label}</p>
      <div className="relative w-full">
        <div className="w-full overflow-x-auto">
          <p className="whitespace-nowrap pr-4 text-sm font-medium">{value}</p>
        </div>
        <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent"></div>
      </div>
    </div>
  );
}

如果还是不生效，可以排查以下两点：

• 检查Card组件是否被设置了overflow-x: hidden，如果有需要移除或调整；
• 确保InfoItem的直接父元素没有设置inline-block/inline-flex这类会随内容拉伸的布局属性，必要时给父元素也加上w-full。

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