Shadcn Dialog中无法实现横向滚动区域的问题求助

你的代码里滚动区域无法显示，大概率是ScrollArea组件缺少明确高度设置导致的——Shadcn的ScrollArea需要指定高度才能正常渲染滚动容器，否则会被父元素压缩到不可见。另外也需要确认外层容器的样式是否限制了滚动区域的显示空间。

修复方案 #

给ScrollArea添加固定高度或最小高度，同时调整外层容器样式确保空间充足：

<DialogHeader className="border-b py-1 flex-shrink-0 bg-gray-100">
  <DialogTitle></DialogTitle>

  {/* Item Filtering */}
  <div className="mt-2 w-full">
    {/* 给ScrollArea设置明确高度，同时指定横向滚动条逻辑 */}
    <ScrollArea className="w-full h-12" scrollbars="horizontal">
      <div className="bg-gray-100 p-3 flex gap-2 rounded-md min-w-[700px]">
        <Button
          variant={selectedItems.length === 0 ? "default" : "outline"}
          className="rounded-full whitespace-nowrap text-xs h-7 px-3"
          onClick={resetItems}
        >
          All Items
        </Button>

        {ITEMS.map((item) => (
          <Button
            key={item}
            variant={selectedItems.includes(item) ? "default" : "outline"}
            className="rounded-full whitespace-nowrap text-xs h-7 px-3"
            onClick={() => toggleItem(item)}
          >
            {item}
          </Button>
        ))}
      </div>
    </ScrollArea>
  </div>
</DialogHeader>

关键调整点 #

• 给ScrollArea添加h-12（或其他适配你的布局的高度值），让组件有明确的渲染空间
• 移除外层div的overflow-hidden，避免遮挡滚动区域
• 可选添加scrollbars="horizontal"属性，明确指定横向滚动条的显示逻辑

如果还是不显示，可以检查：

• 是否正确导入了Shadcn的ScrollArea组件及其依赖样式
• Dialog的内容容器是否存在overflow-hidden之类的样式限制内部元素显示
• 确认min-w-[700px]的宽度确实超过Dialog的宽度，满足触发横向滚动的条件

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