[ScrollArea] Component Causes Overflow with Non-Wrappable Children Wider Than Parent

[jamesvillarrubia]

Problem Statement

When using the ScrollArea component, if a child element inside the viewport is wider than the parent and can’t be wrapped, the child element overflows outside the viewport. The expected behavior would be for the ScrollArea to introduce a horizontal scrollbar to contain the overflowing content, but this doesn’t happen automatically.

Reproduction Steps

1. Render the ScrollArea component with a child element whose width exceeds that of the viewport.
2. Ensure the child element’s content is non-wrappable (e.g., long text without breaks or a wide image).
3. Observe that the child element extends beyond the viewport without introducing a horizontal scrollbar.

Expected Behavior

• When a child element’s width exceeds the viewport’s width, a horizontal scrollbar should be automatically introduced to allow scrolling, rather than allowing the content to overflow.

Actual Behavior

• The child element extends outside of the viewport, causing unintended overflow. This makes the overflow content inaccessible or partially visible depending on the parent container’s dimensions.

Example Code

Here’s a simple code snippet to reproduce the issue:

import React from 'react';
import { ScrollArea } from './ScrollArea';

export default function OverflowExample() {
  return (
    <div style={{ width: '300px', height: '200px', border: '1px solid black' }}>
      <ScrollArea>
        <div style={{ width: '500px' }}>
          {/* Non-wrappable content */}
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius sapien vitae augue bibendum dignissim.
        </div>
      </ScrollArea>
    </div>
  );
}

Additional Information

• Package Version: @radix-ui/react-scroll-area v3.1.4
• Browser/Platform: Chrome & Firefox (at least)

Possible Solutions

• There's no clear way to inject classes for the ViewPort subcomponent. Adding a prop to pass down to the ViewPort would allow overrides without having to inject custom CSS.

Please let me know if you need any more information or clarification! Thanks for all the great work on this project.