`<Select />` causes scrollbar to appear when near bottom of the page

[IonelLupu]

Provide a general summary of the issue here

When using the <Select /> component from react-aria-components, if the component is placed near the bottom of the page in a overflow: auto parent, an unexpected vertical scrollbar to appear on the html tag.

Screen.Recording.2025-06-09.at.07.38.47.mov

🤔 Expected Behavior?

The Select placed close to the bottom of the page should not affect the page layout — specifically, it should not cause the body to overflow or a scrollbar to appear if it's parent has overflow: auto

😯 Current Behavior

Placing a <Select /> close the the bottom of the page in a overflow: auto parent causes the html tag to show a scroll bar instead of keeping only the Select's parent scroll bar

💁 Possible Solution

No response

🔦 Context

A normal <select /> element doesn't have the same issue.

🖥️ Steps to Reproduce

Link: https://codesandbox.io/p/devbox/lucid-mirzakhani-m6yys9?workspaceId=ws_SQ5nesRrffQb7ChCog6mDH

Steps to Reproduce:
1. Have div inside the body be flex row with two children: the left one can be "flex: 3" . The right one can be flex: 1. It will also contain the Select.
2. Place a <Select /> component near the bottom of a page in the right child described above. You may use text to fill in the top of the page.
3. Observe that a vertical scrollbar appears on the page both when you scroll while having the mouse on the left and right children. There are two different scroll bars.

Version

1.10.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS 15.3.2

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue, looks like the code sandbox is private

[IonelLupu]

this gets me every time haha. I just made it public

@snowystinger

[AndrewBoiko]

@IonelLupu @snowystinger
As a suggestion, wrap it in the container with position: relative.
In my case, the issue was caused by a hidden element created by the component with unusual positioning.

[IonelLupu]

@AndrewBoiko , oh. wow. This works. Thank you!

But I think this issue can stay open since the solution is more of a "hack". I wonder what kind of element has the unusual position and "breaks" the scroll 🤔

[snowystinger]

Thanks, looks like it's the same as this issue fix: give radio/checkbox position relative so the hidden input is contained

Can be resolved the same way. Unfortunately this does mean putting position relative yourself as we cannot predict when it should be used.

I'll leave open to handle in our examples and spectrum implementations, but expectation is that implementors handle this.

It's a bit unfortunate that the hidden element is outside the root of the component. We might be able to move it inside to make this a little more straightforward. Another reason to leave this issue open