Dynamic menu height calculation is incorrect when rendered within a scrollable parent

Are you reporting a bug or runtime error?

• Type: Bug
• Tested react-select versions: v4.0.2, v3.1.0
• Tested react version: 17.0.1, 16.12.0
• Code sandbox demo: Demo (see notes regarding OS scrollbars below)

Description

When the Select component is rendered within a scrollable parent element (overflow-y: auto) in such a way that when the menu is opened its natural height would be greater the available space below the control, the resulting calculated height of the menu is incorrect.

This causes the browser to overflow the parent and render scrollbars, resulting in "double scrollbars" (one for the menu list and one from the scrollable parent), which looks really ugly.

As you can see from the screenshot above, it appears that the height of the menu doesn't seem to correctly factor in the marginTop and marginBottom of the menu based on how much additional space is required – though this may just be a coincidence as I can see that the code responsible for the calculation does attempt to account for these numbers:

https://github.com/JedWatson/react-select/blob/7532d4d5f413456c232dc9b7ab8fa0df4f3c6785/packages/react-select/src/components/Menu.js#L68-L87

Perhaps the padding on the scrollable parent is the cause? Also not sure, just throwing some ideas out there.

Notes

This is predominantly an issue on operating systems that always render the scrollbars. This is not the default behaviour on macOS, so in order to be able to see the reported issue you'll need to enable this behaviour via:
System Preferences > General > Show scroll bars: Always

Start at packages/react-select/src/components/Menu.js around lines 68–87 and reproduce the CodeSandbox case with Select inside an overflow-y: auto parent. Compare the calculated menu height with the available space and verify the fix removes the parent’s extra scrollbar while preserving the menu list behavior, including on systems with always-visible scrollbars.