如何使ScrollArea组件高度随数组内容长度动态调整？

要解决固定高度导致内容少时出现空白的问题，核心思路是根据数组元素数量动态切换容器高度：

• 当元素数量超过2个时，保持固定高度h-[225px]，触发滚动
• 当元素数量≤2个时，用自适应高度h-auto，让容器贴合内容

修改后的代码如下：

const ScrollAreaDemo = () => (
  <ScrollArea.Root 
    className={`w-[200px] rounded overflow-hidden shadow-[0_2px_10px] shadow-blackA4 bg-white ${TAGS.length > 2 ? 'h-[225px]' : 'h-auto'}`}
  >
    <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.Root>
);

export default ScrollAreaDemo;

关键改动说明 #

1. 把固定的h-[225px]替换为动态类：通过TAGS.length > 2的判断，决定使用固定高度还是自适应高度
2. 保留其他样式不变，确保视觉一致性
3. Viewport的h-full会自动适配Root的高度：当Root是h-auto时，Viewport跟随内容高度拉伸；当Root是固定高度时，Viewport保持满高触发滚动

这样设置后，不管数组元素是1个、2个还是50个，容器都能完美适配内容，不会出现多余空白。

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