Scrolling scrolling menu into view does not work well inside scroll container

Are you reporting a bug or runtime error?

A bug, here is a codesandbox: https://codesandbox.io/s/w0ymoxq827

The issue is that viewHeight is calculated from the window, which causes problems for select elements inside of other scroll containers. This can be seen in the provided codesandbox, by changing the height of the embedded browser window, and seeing that the scroll behavior changes depending on that height.

I've played around in the code enough to find what seems to be a solution, causing the scroll container to scroll when needed, and also constraining the height of the menu to the total visible height of the scroll container, so the entire menu is shown, and it's not necessary to scroll the container outside the menu to see the entire menu. I'll work on cleaning up my code and will submit a PR, but I wanted to at least open an issue to explain the problem.

Oh and one other question while I'm at it, why does the scroll container need to be position: relative; to be detected as a scroll parent? It's not immediately obvious that it's necessary, and it was only by digging through the
source that I figured out why my container was not scrolling. I guess this is because the menu is absolutely positioned, so it needs a relative parent.

I believe this is similar to the case reported back in https://github.com/JedWatson/react-select/issues/1267, but that plnkr is broken, so I can't tell for sure.

Start with the linked CodeSandbox and src/components/Menu.js around the viewHeight calculation at line 75. Reproduce the behavior by changing the embedded browser height, then inspect how the scroll parent is detected. Done means the containing scroll area scrolls when needed and the menu height is constrained to the visible area.