通过将固定高度改为 h-auto 并配合 max-h-[225px] 和 overflow-scroll，可使 ScrollArea 自适应内容高度：内容少时收缩无空白，内容多时自动启用滚动条。
通过将固定高度改为 `h-auto` 并配合 `max-h-[225px]` 和 `overflow-scroll`，可使 scrollarea 自适应内容高度：内容少时收缩无空白，内容多时自动启用滚动条。
在构建响应式 UI 组件时，一个常见需求是让容器高度随内容动态变化，而非始终维持固定尺寸。以 Radix UI 的 <scrollarea.root></scrollarea.root> 为例，若直接设置 h-[225px]，当列表项（如 TAGS）数量极少（例如仅 1–2 项）时，会留下大量冗余空白区域，影响视觉一致性与用户体验。
核心解决方案是解耦「最小/自然高度」与「最大可用高度」：
- ✅ 使用
h-auto让容器根据子内容撑开高度； - ✅ 添加
max-h-[225px]限制其上限，防止内容过多时无限拉伸； - ✅ 将
overflow-hidden替换为overflow-scroll，确保超出最大高度时仍可滚动（同时保留滚动条交互能力）； - ✅ 补充
<scrollarea.scrollbar></scrollarea.scrollbar>和<scrollarea.corner></scrollarea.corner>组件（Radix 官方推荐），保障横/纵滚动条及角落渲染的完整性。
以下是优化后的完整代码示例：
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 orientation="vertical" 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"><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.thumb></scrollarea.scrollbar>
{/* 水平滚动条（按需启用） */}
<scrollarea.scrollbar orientation="horizontal" classname="flex select-none touch-none p-0.5 bg-blackA3 transition-colors duration-[160ms] ease-out hover:bg-blackA5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"><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.thumb></scrollarea.scrollbar>
{/* 滚动区域角落（兼容双轴滚动） */}
<scrollarea.corner classname="bg-blackA5"></scrollarea.corner></scrollarea.root>
);
export default ScrollAreaDemo;
⚠️ 注意事项：
- 若内容极简（如仅标题无列表项），建议为
.py-[15px] px-5内容区添加min-height或占位逻辑，避免容器塌陷； -
overflow-scroll会始终显示滚动条轨道（即使未触发滚动），如需“仅在需要时显示”，应使用overflow-y-auto并移除水平滚动条（除非明确支持横向滚动）； - Radix ScrollArea 的
Viewport必须包裹在Root内，且Scrollbar等辅助组件不可省略，否则滚动行为可能异常或样式丢失。
该方案兼顾了美观性、可访问性与框架最佳实践，在保持设计约束（如最大高度 225px）的同时，实现了真正的内容驱动布局。
