React-select: Options list breaks across columns when used in CSS multi-column container (Chrome)

[jbgarr]

If a ReactSelect component is used in a container that uses a CSS multi-column layout (by using one of the following css properties: column-width or column-count) the options list breaks into the next column. From what I've seen, using a combo of different CSS properties related to break-inside: avoid should avoid breaks inside of a group of elements across columns. However, this doesn't seem to be the case for elements that use position: absolute; as is the case for the .Select-menu-outer options list.

To see the issue open the plunk below and run it with the screen width set so the select elements are spread across 2 columns. Then open the second or third select in the first column. You'll see the dropdown menu breaks into the second column (as seen in the screen shot below):

https://plnkr.co/edit/DezK1BwsSvwVVyBLBjkV?p=preview

[jbgarr]

This is also an issue with V2 BTW.

[jossmac]

@jbgarr this sounds like a bug with the consumer styles applied to the component and its surrounds, rather than the component itself.

[toddcoulson]

I am having a similar issue where if I put react-select component inside a div that has column-count on it, the react-select component will not display the selected item.

[cricrio]

This issue is still happening in v3.
https://codesandbox.io/s/react-select-v3-sandbox-iopt-cb5qf