Fixing the Radix UI Scrollbar Bug with One Line of CSS

If you're using Radix UI or shadcn/ui and have run into the frustrating issue where scrollbars disappear—causing layout shifts and disabling interaction with the rest of the page—you're not alone. This bug has been widely discussed in the React community, and while there are several workarounds floating around, one simple CSS snippet can solve it all.

🛠️ The Problem

Radix UI components like <Select/>, <DropdownMenu/>, and <Dialog/> often lock the scrollbar when opened. This leads to:

• Layout shifting (especially for fixed elements)
• Unintended margin or padding changes
• Loss of scroll functionality on the page

✅ The One-Line Fix

Forget the Tailwind hacks and component-level overrides. Just drop this into your global CSS:

💡 Why It Works

• overflow: auto !important; restores the scrollbar even when Radix tries to hide it.
• margin-right: 0 !important; cancels out the padding Radix adds to compensate for the missing scrollbar.
• Scoped under :root, this applies globally and cleanly.

This fix has helped many developers regain control over their layouts without sacrificing the developer experience that makes Radix and shadcn/ui so popular. Try it out and enjoy a smoother UI!