通过将固定高度改为 h-auto 并配合 max-h-[225px] 与 overflow-scroll，可使 ScrollArea 自适应内容高度：内容少时收缩无白边，内容多时自动启用滚动条，兼顾美观与实用性。
通过将固定高度改为 `h-auto` 并配合 `max-h-[225px]` 与 `overflow-scroll`，可使 scrollarea 自适应内容高度：内容少时收缩无白边，内容多时自动启用滚动条，兼顾美观与实用性。
在构建可复用 UI 组件（如标签列表、侧边导航或配置项面板）时，常需平衡「视觉一致性」与「内容自适应性」。若为 <scrollarea.root></scrollarea.root> 设置固定高度（如 h-[225px]），当数据量极少（如仅 1–2 条）时，会因高度不可缩而产生大量冗余空白区域，影响界面紧凑性与用户体验。
推荐解决方案：使用 h-auto max-h-[225px] overflow-scroll 组合
该方案的核心逻辑是：
-
h-auto：让容器高度由子内容自然撑开； -
max-h-[225px]：设定最大允许高度，防止内容过多时无限拉伸； -
overflow-scroll：显式启用滚动行为（替代overflow-hidden），确保超出部分可滚动查看； - 同时需补全 Radix UI ScrollArea 的必要子组件（
Scrollbar、Corner），否则滚动条可能不渲染或交互异常。
以下是优化后的完整代码示例：
import React from "react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
const TAGS = Array.from({ length: 50 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`
);
const ScrollAreaDemo = () => (
<ScrollArea.Root
className="w-[200px] h-auto max-h-[225px] rounded overflow-scroll
shadow-[0_2px_10px] shadow-blackA4 bg-white"
>
<ScrollArea.Viewport className="w-full h-full rounded">
<div className="py-[15px] px-5">
<div className="text-violet11 text-[15px] leading-[18px] font-medium">
Tags
</div>
{TAGS.map((tag) => (
<div
className="text-mauve12 text-[13px] leading-[18px] mt-2.5 pt-2.5 border-t border-t-mauve6"
key={tag}
>
{tag}
</div>
))}
</div>
</ScrollArea.Viewport>
{/* 垂直滚动条 */}
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 bg-blackA3 transition-colors duration-[160ms] ease-out
hover:bg-blackA5 data-[orientation=vertical]:w-2.5
data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
orientation="vertical"
>
<ScrollArea.Thumb className="flex-1 bg-mauve10 rounded-[10px] relative
before:content-[''] before:absolute before:top-1/2 before:left-1/2
before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full
before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
{/* 水平滚动条（可选，按需保留） */}
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 bg-blackA3 transition-colors duration-[160ms] ease-out
hover:bg-blackA5 data-[orientation=vertical]:w-2.5
data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
orientation="horizontal"
>
<ScrollArea.Thumb className="flex-1 bg-mauve10 rounded-[10px] relative
before:content-[''] before:absolute before:top-1/2 before:left-1/2
before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full
before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
{/* 滚动区域角落装饰 */}
<ScrollArea.Corner className="bg-blackA5" />
</ScrollArea.Root>
);
export default ScrollAreaDemo;✅ 关键注意事项：
- 若省略
<scrollarea.scrollbar></scrollarea.scrollbar>和<scrollarea.corner></scrollarea.corner>，Radix UI 将默认隐藏滚动条（即使内容溢出），导致用户无法感知可滚动状态； -
overflow-scroll确保滚动条始终可用（即使未悬停），提升可访问性；若需更精致的交互（如仅悬停显示），可改用overflow-auto并配合data-[state=hover]样式控制； -
max-h-*值应根据设计规范和最小内容高度合理设定，避免过小导致首屏内容被截断； - 对于服务端渲染（SSR）场景，建议结合
useEffect或ResizeObserver进行运行时高度校验，以防样式闪动。
此方案无需 JavaScript 动态计算高度，纯 CSS 驱动，性能优异，且完全兼容 Radix UI 的无障碍标准与响应式行为。
