Fixing shadcn/ui ScrollArea Horizontal Overflow with a Simple Trick

February 15, 2026A quick trick to make shadcn/ui ScrollArea properly scroll horizontally instead of overflowing its container.

I encountered an annoying issue where the shadcn/ui ScrollArea component wasn't containing overflow properly. Instead of scrolling horizontally, the content would overflow and push the entire page wide.

The Problem

I had a ScrollArea wrapping a code block in my blog:

<ScrollArea className="w-full">
  <code>{/* some long code line */}</code>
</ScrollArea>

On narrow screens, instead of the code block scrolling within the ScrollArea, it would stretch the entire page wide and cause horizontal scrolling on the document body.

The Trick

Here's the fix by CeamKrier from stackoverflow - set both flex-1 and a small random width (e.g., w-1) on the ScrollArea:

<ScrollArea className="w-1 flex-1">
  <code>{/* your content */}</code>
</ScrollArea>

That's it. The ScrollArea now properly contains overflow and shows a horizontal scrollbar instead of stretching the page.

Why This Works

Honestly, it seems counterintuitive - why would setting w-1 and flex-1 together make it work? The StackOverflow community also found this surprising, but it works reliably across different projects.

Reference: stackoverflow answer by CeamKrier