Yep, I see the issue. It also doesn't work with Tab keyboard navigation.

An option for you to fix it in your app:
You can apply position: relative on your Checkbox__Container class, this means that the visually hidden element will be positioned relative to it, instead of relative to App. This means the visually hidden input can't be positioned outside the flow of Main and therefore won't add any overflow scroll. This will also fix the Tab keyboard navigation.

As for solutions we can apply:
We might be able to add a top/left to the visually hidden element, however, if the overflow element and the stacking context root are separated as they are in your example, then this may not work.
This also wouldn't solve the keyboard navigation.

Otherwise, we'd need to create a wrapping element around the VisuallyHidden which has position relative on it with a height and width of 0. I think this may cause a problem with assistive techologies though. We'll have to try it out and consult with our accessibility team. It may also be positioned incorrectly within the "Checkbox" depending on where various elements have been positioned visually.

Setting top, left or bottom to 0 on VisuallyHidden resolves the scrolling issue for me. However I do not know if this causes problems for screen readers?

Just hit this as well. Occurs when I have a radio group and I select a radio option that is inside of overflow scroll. Completely destroys my whole page layout until I wrap my radio group with <div style={{position: "relative"}}>... or add position: relative to the root styles of RadioGroup

Setting top, left or bottom to 0 on VisuallyHidden resolves the scrolling issue for me. However I do not know if this causes problems for screen readers?

I think this would cause a potentially confusing VO cursor as it would appear as though the entire page (or whatever parent has position: relative) is "focused". You should put position relative on the root of the component that the VisuallyHidden is for, such as Checkbox's outer most div. Then you can safely use top, left, right, bottom to 0. You can always test it out with VO or any of the other assistive technologies to see the impact.

Occurs when I have a radio group and I select a radio option that is inside of overflow scroll. Completely destroys my whole page layout until I wrap my radio group with <div style={{position: "relative"}}>... or add position: relative to the root styles of RadioGroup

I think moving the position relative to the Radio would be better than the RadioGroup, otherwise it could be confusing to AT users as the elements would all potentially be stacked in one place.

The best thing for us to do is include some information on the page for VisuallyHidden https://react-spectrum.adobe.com/react-aria/VisuallyHidden.html#visuallyhidden and maybe on components using VisuallyHidden as well.

I just ran into this issue as well. I have a ListBox with a Checkbox inside it. The ListBox has a fixed height and scroll enabled. In this combination, extra space appears below the ListBox. I added position: relative to the checkbox root, and that solved the problem. Thanks for the helpful answers!

I cannot access the code sandbox to verify this, but I recently wrote a short article about this which may be helpful https://filip-wachowiak.vercel.app/blog/default-absolute-positioning-in-a-scroll-container