Next.js 14中KeyWordScroll组件影响父Div滚动行为的问题

方案一：正确配置Shadcn UI的ScrollArea组件 #

Shadcn的ScrollArea已经封装了滚动逻辑，无需在内部容器额外添加overflow-x-auto，否则会导致滚动逻辑冲突，进而撑开父元素。修改KeyWordScroll组件：

export function KeyWordScroll() {
    return (
        <ScrollArea className="w-full rounded-md border overflow-hidden" orientation="horizontal">
            <div className="flex w-full space-x-4 p-4">
                {works.map((artwork) => (
                <figure key={artwork.artist} className="shrink-0">
                    <div className="overflow-hidden rounded-md">
                        <Button>
                            {artwork.artist}
                        </Button>
                    </div>
                </figure>
            ))}
            </div>
            <ScrollBar orientation="horizontal" />
        </ScrollArea>
    )
}

• 给ScrollArea添加orientation="horizontal"明确指定横向滚动
• 移除内部div的overflow-x-auto，让ScrollArea完全接管滚动容器的溢出处理

方案二：给父容器添加溢出隐藏规则 #

如果父元素仍被内容撑开出现滚动条，可以在Layout的右侧内容容器添加overflow-x-hidden，强制隐藏横向溢出：

<main className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
    {/* Sidebar Component */}
    <div className="hidden border-r bg-muted/40 md:block">
        {/* Sidebar content */}
    </div>
    {/* Main content */}
    <div className="flex flex-col overflow-x-hidden">
        <Header />
        {children}
    </div>
</main>

方案三：限制ScrollArea的最大高度（针对纵向溢出场景） #

如果父元素是纵向被撑开导致滚动，给ScrollArea设置固定或最大高度，确保内容超出时仅在组件内部滚动：

export function KeyWordScroll() {
    return (
        <ScrollArea className="w-full rounded-md border overflow-hidden max-h-[80px]" orientation="horizontal">
            <div className="flex w-full space-x-4 p-4">
                {works.map((artwork) => (
                <figure key={artwork.artist} className="shrink-0">
                    <div className="overflow-hidden rounded-md">
                        <Button>
                            {artwork.artist}
                        </Button>
                    </div>
                </figure>
            ))}
            </div>
            <ScrollBar orientation="horizontal" />
        </ScrollArea>
    )
}

• 通过max-h-[80px]（可根据需求调整数值）限制组件高度，内容超出时自动触发内部滚动

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