title: react-select width inside flex container
body: <p>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.</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/ppqjt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ppqjt.jpg" alt="enter image description here"></a></p>
  
  <p>Is there a way (<strong>any way</strong> really) to prevent react-select from overflowing?</p>
  
  <p>Some issues that might be related to this are:</p>
  
  <ul>
  <li><a href="https://github.com/JedWatson/react-select/issues/323" rel="nofollow noreferrer">https://github.com/JedWatson/react-select/issues/323</a></li>
  <li><a href="https://github.com/JedWatson/react-select/issues/1127" rel="nofollow noreferrer">https://github.com/JedWatson/react-select/issues/1127</a></li>
  </ul>
  
  <p>Full sample below:</p>
  
  <p><a href="https://codesandbox.io/s/5xlnv6970n" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit react-select as flex item"></a></p>