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.