diff --git a/packages/react/src/components/scroll-area.tsx b/packages/react/src/components/scroll-area.tsx
index 0f5ad2b250..a41b7baa29 100644
--- a/packages/react/src/components/scroll-area.tsx
+++ b/packages/react/src/components/scroll-area.tsx
@@ -14,9 +14,17 @@ function ScrollArea({
       className={cn("relative", className)}
       {...props}
     >
+      {/* Radix wraps the children in a `display: table; min-width: 100%` div.
+          A table grows to its widest child's max-content (e.g. a long,
+          non-wrapping code line), so it escapes the viewport's `overflow-x:
+          hidden` and clips content instead of letting it wrap or scroll within.
+          `[&>div]:!block` forces that wrapper back to a block bounded by the
+          viewport width, so the content fits and any inner scroller (CodeBlock)
+          owns its own horizontal overflow. Direct child (`>div`) only — a
+          descendant match would flatten the grid/flex layouts inside. */}
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 [&>div]:!block"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>