已定义宽度的Div仍被拉伸的问题求助

我知道这个问题可能有点菜，但我整整耗了一上午，还是没搞明白到底哪里出问题了。

下面是我的组件代码（部分逻辑内容被截断，核心布局代码都在）：

export default function Summary({ activation }: SummaryProps) {
  const t = useTranslations("ActivationPage.summary");
  const tCommon = useTranslations("Common");
  const toast = useToast();
  return (
    <div className="flex gap-6 w-full overflow-x-hidden">
      <Card className="min-w-0 flex-1">
        <CardHeader className="flex flex-row items-center relative justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">
            {t("activation_key")}
          </CardTitle>
          <Button
            className="absolute top-3 right-3"
            variant="outline"
            size="icon"
            onClick={(event) => {
              event.stopPropagation();
              // 后续逻辑代码省略
            }}
          >
            {/* 按钮图标内容 */}
          </Button>
        </CardHeader>
        {/* 卡片内部其他内容 */}
      </Card>
      {/* 页面中还有其他同类Card组件 */}
    </div>
  );
}

我遇到的问题是：明明给外层div设置了w-full和overflow-x-hidden，内部的Card也加了min-w-0和flex-1，但这个Div还是会被意外拉伸，超出预期宽度，导致页面出现横向滚动条，布局完全乱了。有没有大佬能帮我分析下这到底是哪里的问题？

备注：内容来源于stack exchange，提问作者Enzo