Example of using ScrollArea within a sheet

[pdonnelly3]

Does anyone have a working example of using the ScrollArea component within a sheet?

[sakilanwar12]

Yes, I used it. Shadcn ScrollArea requires a fixed height, so for dynamic layouts, we calculate the height based on available space.

[mujtbabbas]

The trick is that the ScrollArea needs a bounded height, and inside a sheet that bound comes from flexbox, not from setting a height on the ScrollArea itself. Make the SheetContent a flex column, pin the header and footer, and let the ScrollArea take whatever space is left:

import {
  Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter,
} from '@/components/ui/sheet'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Button } from '@/components/ui/button'

export function ExampleSheet() {
  return (
    <Sheet>
      {/* trigger etc. */}
      <SheetContent className="flex flex-col">
        <SheetHeader>
          <SheetTitle>Title</SheetTitle>
        </SheetHeader>

        <ScrollArea className="min-h-0 flex-1">
          <div className="space-y-4 pr-4">
            {/* your long content here */}
          </div>
        </ScrollArea>

        <SheetFooter>
          <Button>Save</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

The two details that make or break it:

1. min-h-0 on the ScrollArea is the part everyone misses. A flex child refuses to shrink below the size of its content by default, so without min-h-0 the ScrollArea just grows with the content and the Radix viewport never gets a height to scroll within. With flex-1 min-h-0 it gets exactly the leftover space, and the viewport scrolls.
2. Put padding inside the scrollable content, not on the ScrollArea. The inner div carries the spacing, and the pr-4 keeps text from sliding underneath the scrollbar.

If your SheetContent variant isn't full height (top/bottom sheets), add a cap like max-h-[85vh] on the content and the same structure works.

And if you don't actually need Radix's custom scrollbar, a plain <div className="min-h-0 flex-1 overflow-y-auto"> in the same slot does the job with one less component, but the flex rules above are identical either way.

[RafaelHDSV]

The Sheet already clips overflow. ScrollArea only works if it is given a bounded height inside that clip. The usual miss is leaving SheetContent as a growing column, so ScrollArea's viewport is height: auto and never scrolls.

This pattern works with the current shadcn Sheet + ScrollArea:

import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from '@/components/ui/sheet'
import { ScrollArea } from '@/components/ui/scroll-area'

export function Example({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="flex h-full flex-col gap-0 p-0 sm:max-w-md">
        <SheetHeader className="shrink-0 border-b px-6 py-4">
          <SheetTitle>Details</SheetTitle>
          <SheetDescription>Long list, header stays put.</SheetDescription>
        </SheetHeader>

        <ScrollArea className="min-h-0 flex-1">
          <div className="space-y-4 px-6 py-4">
            {Array.from({ length: 40 }, (_, i) => (
              <p key={i}>Row {i + 1}</p>
            ))}
          </div>
        </ScrollArea>
      </SheetContent>
    </Sheet>
  )
}

Why those classes matter:

• flex h-full flex-col on SheetContent makes the panel a column the height of the viewport.
• min-h-0 flex-1 on ScrollArea is the important bit. A flex child defaults to min-height: auto, which prevents shrinking, so the Radix viewport never gets a max height and the native page (or the sheet) scrolls instead.
• Keep padding on the inner div, not on SheetContent, or the scrollbar sits on top of the title.

Side sheets already have a height. For side="bottom" / side="top", set an explicit height on SheetContent (h-[80vh]) or the same thing happens.

If this gave you a working sheet, please mark it as the accepted answer.