How to fix react-window height issue with react-select?

Question

I'm using react-select with react-window but there is issue with height of dropdown like:

I have only two value but height is larger than items, How can i fix it? dropdown values coming from API that can be vary.

Note: I also need to define maxHeight of dropdown.

Code Sandbox

Answer 1

Changing the height using react style to max-content fixes the issue here

  <List
    style={{ height: "max-content", maxHeight: maxHeight }}
    height={1}
    itemCount={children.length}
    itemSize={itemHeight}
    initialScrollOffset={initialOffset}
  >
    {({ index, style }) => <div style={style}>{children[index]}</div>}
  </List>

you still need to specify height since the component requires it but it can be any value the max-content will overwrite it. This is a fixed fork of your issue