How to position React Select menu based on available space?

I have the following example that I’m trying to fix in my project. So page-wrapper’s height is supposed to emulate a page that has some content on it, hence the height CSS property. I placed select-container in the middle intentionally to have space both above and below it. If I open the menu for example when I land on the page, so no scroll in yet, instead of opening it up top, ReactSelect is opening it at the bottom and scrolling me down to it. I tried menuPlacement=”auto” prop as you can see because from what I’ve seen in the documentation, it should do the positioning automatically, but it doesn’t seem to work.

My Component

import ReactSelect from “react-select”; const options = [ { label: “No 1”, value: “test_1” }, { label: “No 2”, value: “test_2” }, { label: “No 3”, value: “test_3” }, { label: “No 4”, value: “test_4″ } ]; export default function App() { return ( <div className=”page-wrapper”> <div className=”select-container”> <ReactSelect options={options} menuPlacement=”auto” /> </div> </div> ); }

CSS

* { margin: 0; padding: 0; box-sizing: border-box; } .page-wrapper { min-height: 180vh; width: 100%; background-color: #f8f8f8; display: flex; align-items: center; } .select-container { width: 90%; margin: 0 auto; }

I have a Sandbox code here if needed.