1

I'm trying to build a React component that includes react-select as child element of a flex container which, in turn, may contain other elements of variable size.

The main problem is that I'm currently not able to limit react-select to the width of the parent flex container. This is what happens when the label of the selected option is too long:

enter image description here

Is there a way (any way really) to prevent react-select from overflowing?

Some issues that might be related to this are:

Full sample below:

Edit react-select as flex item

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
fabriziocucci
  • 782
  • 8
  • 20
  • how are you expecting to display? you have more horizontal content then you have horizontal space. do you want to hide the overflow or make the flex container scroll horizontally? – azium Feb 06 '19 at 21:45
  • I'd like the first element ("dog ...") to be exactly like the the second element ("cat ..."), i.e. confined in the red box, no overflow in the yellow box and no horizontal scrollbar. The react-select should be allowed to grow vertically when adding additional items. – fabriziocucci Feb 06 '19 at 22:03
  • I suggest you to take a look at this post https://stackoverflow.com/questions/54217980/using-the-react-select-to-create-the-markup-using-bootstrap-4/54228137#54228137 it's the same issue as you have but using bootstrap – Laura Feb 07 '19 at 15:40

1 Answers1

1

As suggested here, simply styling the react-select component with minWidth: '0px' does the job.

Laura
  • 8,100
  • 4
  • 40
  • 50
fabriziocucci
  • 782
  • 8
  • 20