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.
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.
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'
/>