Make React Select horizontally scrollable on overflow-CodePudding

How can I make a React Select (specifically multiselect) component be able to scroll horizontally when the box overflows? I've tried

<Select
    // some other props
    styles={{
      valueContainer: (base) => ({
        ...base,
        overflowX: 'scroll',
      }),
    }}
    isMulti
/>

but that does not work. I am using React and Tailwind CSS.

CodePudding user response：

I am not sure this will work, and it's also a bit hacky:

styles={{
      valueContainer: (base) => ({
        ...base,
        overflowX: 'scroll',
        flexWrap: 'unset',
      }),
      multiValue: (base) => ({
        ...base,
        flex: '1 0 auto',
      })
    }}

Please note that this will introduce new problems with scrollbars - on windows I assume the scrollbars will be visible permanently and mess with the layout, while on a Mac, the scrollbars will only appear while scrolling but then hide most of the content of the select value container.

CodePudding user response：

If you are using Tailwind CSS then you can simply add the className='overflow-x-scroll' to enable horizontal scrolling.

<Select
    // some other props
    styles={{
      valueContainer: (base) => ({
        ...base,
        overflowX: 'scroll',
      }),
    }}
    isMulti
    className='overflow-x-scroll'
/>