Div 正在扩展，即使它已经定义了宽度

Question

我觉得这个问题很愚蠢，但我花了一个完整的上午，无法真正理解发生了什么。

这是我的组件代码：

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();
              navigator.clipboard.writeText(activation.activation_key);
              toast({
                type: "info",
                message: tCommon("actions.copied"),
                id: "idCopied",
              });
            }}
          >
            <Copy className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold overflow-hidden text-ellipsis whitespace-nowrap">
            {activation.activation_key}
          </div>
        </CardContent>
      </Card>

      <Card className="min-w-0 flex-1">
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-medium">
            {t("machine_num")}
          </CardTitle>
        </CardHeader>
        <CardContent className="flex gap-3 items-center">
          <Hash className="h-6 w-6" />
          <div className="text-2xl font-bold">{activation.machine_num}</div>
        </CardContent>
      </Card>
      <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("host_id")}
          </CardTitle>
          <Button
            className="absolute top-3 right-3"
            variant={"outline"}
            size={"icon"}
            onClick={(event) => {
              event.stopPropagation();
              navigator.clipboard.writeText(activation.host_id);
              toast({
                type: "info",
                message: tCommon("actions.copied"),
                id: "idCopied",
              });
            }}
          >
            <Copy className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold overflow-hidden text-ellipsis whitespace-nowrap">
            {activation.host_id}
          </div>
        </CardContent>
      </Card>
      <Card className="min-w-0 flex-1">
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-medium">{t("end_date")}</CardTitle>
        </CardHeader>
        <CardContent className="flex gap-3 items-center">
          <Hash className="h-6 w-6" />
          <div className="text-2xl font-bold">{activation.machine_num}</div>
        </CardContent>
      </Card>
    </div>
  );
}

此代码代表一个页面，标题上有一些卡片，可快速查看信息。

我希望每一行只占一行，如果太长就会被截断。

使用我的激活密钥时，一切看起来都很好。但是，当我使用 host_id（在第三张卡上）时，我的页面宽度爆炸，创建水平滚动，但 host_id 仍然被截断。

我不明白为什么在某些时候它会因为一根绳子比另一根绳子长而被破坏。

这是两张图片，第一张可以工作，第二张有错误：

我使用break-all、whitespace-nowrap、truncate等尝试了很多方法，但没有一个能解决问题。

我还尝试在卡片容器上使用 w-1/4，但它没有改变任何东西

我正在使用 shadcn 卡（未更新）和 tailwindcss。这是一个 nextjs 项目。

编辑：

我找到了部分解决方案（但不是核心问题）。用

max-w-[30ch]

限制我的 div 宽度可以让事情顺利进行。但我不明白为什么会这样。它不断截断文本（如预期），但不会使页面变大。

编辑2：（解决方案）

我找到了一个使用 grid 而不是 flex 的解决方案。我仍然不明白为什么它不能很好地与 Flex 配合使用，但与网格配合使用却效果很好......

Answer 1

我认为你的错误是由于

flex-1

CSS 造成的。尽管如此，始终在组件上设置最大宽度是一个很好的做法，以防发生奇怪的情况。

如果这不能解决您的问题，请尝试考虑

flex-shrink

或

flex

属性。也许您正在覆盖某些内容。