The content in ScrollArea doesn't scroll when using max-height

[MukaiUshio]

The content in ScrollArea scrolls well when height is specified in className, but not when max-height is used.

here's the example

working

<ScrollArea className="min-w-full h-screen border-slate-200 border rounded-lg">
//content...(the height is larger than screen)
</ScrollArea>

not working

<ScrollArea className="min-w-full max-h-screen border-slate-200 border rounded-lg">
//content...(the height is larger than screen)
</ScrollArea>

[sambeaCA]

Just noticed that has well.

[0xpolarzero]

I found a very bad solution but it works right now. Just need to set a height, detect the actual height of the content, and adapt it if it's lower than the max height.

import { Root as ScrollAreaRoot } from "@radix-ui/react-scroll-area"
...

const [scrollAreaHeight, setScrollAreaHeight] = useState<number>(200) // the max height
const scrollArea = useRef<React.ElementRef<typeof ScrollAreaRoot>>(null)
...

useEffect(() => {
  const textDiv = (
    document.querySelector(
      "[data-radix-scroll-area-viewport]"
    ) as HTMLDivElement // The viewport containing the content of scroll area
  )?.children[0] as HTMLDivElement // The actual content of the scroll area

  setScrollAreaHeight(textDiv?.offsetHeight < 200 ? textDiv?.offsetHeight : 200) // Set it to the actual height if it's lower than max height
}, [])
...

return (
  <ScrollArea
    ref={scrollArea}
    className={`h-[${scrollAreaHeight}px]`}
  >
    // The content
  </ScrollArea>
)

[tobiasfoerg]

Here is a solution that works with resizing. I would be happy if someone came up with better/css only solution.

const ScrollArea = React.forwardRef<
	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, forwardedRef) => {
	const ref = React.useRef<HTMLDivElement>(null);

	React.useEffect(() => {
		const content = document.querySelector("[data-radix-scroll-area-viewport]")?.children[0] as HTMLElement | undefined;
		if (!content) return;

		const observer = new ResizeObserver((entries) => {
			const entry = entries[0].target as HTMLElement;
			if (ref.current) {
				// NOTE: This is a hack to fix the scroll area not resizing properly
				// when the content is smaller than the scroll area.
				ref.current.style.height = entry.offsetHeight + "px";
				ref.current.style.height =
					entry.offsetHeight < ref.current.offsetHeight
						? entry.offsetHeight + "px"
						: ref.current.offsetHeight + "px";
			}
		});

		observer.observe(content);

		return () => {
			observer.disconnect();
		};
	}, []);

	return (
		<ScrollAreaPrimitive.Root
			ref={composeRefs(forwardedRef, ref)}
			className={cn("relative overflow-hidden", className)}
			{...props}
		>
			<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
				{children}
			</ScrollAreaPrimitive.Viewport>
			<ScrollBar />
			<ScrollAreaPrimitive.Corner />
		</ScrollAreaPrimitive.Root>
	);
});

[joaom00]

Hey guys, can you confirm if works if you pass the max-h-* to the Viewport instead of the Root?. Thanks!

[skibitsky]

This worked for me

<ScrollArea>
  <div className="max-h-[20rem]">
    ... content
  </div>
</ScrollArea>

[max-programming]

This worked for me

<ScrollArea>
  <div className="max-h-[20rem]">
    ... content
  </div>
</ScrollArea>

This is it 👏! Thanks!

[shaddollxz]

set the components like this, use flex limit viewport height

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    className={classX('flex flex-col relative overflow-hidden', className)}
  >
    <ScrollAreaPrimitive.Viewport
      ref={ref}
      className="flex-grow w-full rounded-[inherit]"
      {...props}
    >
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))

this code works fine

<ScrollArea className="min-w-full max-h-[80vh] border-slate-200 border rounded-lg">
      <div className="h-[110vh]"></
</ScrollArea>

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[thanguc]

I have used the solution from @skibitsky for most cases before, but there is a bug with a recent case I just encountered when I tried to combine some stuff to have a combo-box that can load more items on scrolling down:

• the ShadCN ComboBox
• react-intersection-observer (to trigger the fetch on scrolling to the bottom)
• tanstack-react-query (infinite query, this part should not be relevant to the bug)

I got a bug where the ScrollBar and Thumb height didn't get shorter when more items filled in the list.
Then I tried the solution from @shaddollxz, it works like a charm. Now I just need to pass the max-h-? directly to the ScrollArea.

<ScrollArea className="max-h-56">
</ScrollArea>

[maik-emanoel]

Guys, In my case I was able to fixed it placing the max-height on the ScrollArea.Viewport. I was trynna to put the scrollbar inside SelectContent, so the final code got like that:

export const SelectContent = forwardRef<ElementRef<typeof SelectPrimitive.Content>, SelectContentProps>(
  ({ className, children, position = 'popper', ...props }, ref) => {
    const { content, viewport } = selectVariants({ position })

    return (
      <SelectPrimitive.Portal>
        <SelectPrimitive.Content ref={ref} className={content({ className })} position={position} {...props}>
          <ScrollAreaPrimitive.Root>
            <SelectPrimitive.Viewport className={viewport()} asChild>
              <ScrollAreaPrimitive.Viewport className="max-h-[240px] h-full w-full pr-2">
                {children}
              </ScrollAreaPrimitive.Viewport>
            </SelectPrimitive.Viewport>

            <ScrollAreaPrimitive.Scrollbar orientation="vertical" className="w-2 border-l border-l-transparent p-px">
              <ScrollAreaPrimitive.Thumb className="flex-1 rounded-full bg-content-tertiary" />
            </ScrollAreaPrimitive.Scrollbar>
          </ScrollAreaPrimitive.Root>
        </SelectPrimitive.Content>
      </SelectPrimitive.Portal>
    )
  },
)

[ramezj]

any updates on this specific issue? I'm trying to use the ScrollArea in a drawer component and at the same time maintain full height for the drawer.