React-Select scrolls window instead of scrollable parent div

Our app has a tab-like page layout, where we set overflow: "hidden" on the page in favor of having a scrollable div containing the tab's contents. For additional context, this marketing page contains a video that shows this layout.

Bug: when the menu is opened, the <Select> calls window.scrollTo instead of scrolling the tab content div. If there's an element on the page positioned offscreen (e.g. a Bootstrap .sr-only element), Google Chrome (but not Firefox) actually scrolls the page. This is an issue because the overflow: "hidden" rule then prevents users from scrolling back up to the rest of the app.

Minimal repro sandbox: https://codesandbox.io/s/repro-reactselect-windowscrollto-jqghv?file=/src/Example.js

Additional details

We've tracked down the cause to getScrollParent:

1. When a <Select> menu is opened, if the menu is not completely in view, React-Select uses its scrollTo function to try to scroll the menu onto the screen.
2. The getScrollParent function is used to obtain the menu's scroll parent.
3. Because no position rule was set on any element above the menu, the style.position === 'static' condition returned true for every parent. So getScrollParent returned document.documentElement.
4. This caused scrollTo to call window.scrollTo.

Maybe this can be fixed by using Element.scrollIntoView?

Start with packages/react-select/src/utils.js, especially getScrollParent and scrollTo, and reproduce the behavior in the linked CodeSandbox. Trace how a menu inside an overflow-hidden page identifies its scrollable parent; done means opening an offscreen menu scrolls the containing div without moving the window, with the existing Firefox behavior preserved.