title: Stretch flex parent to (variable) children width in scrollable container
body: <p>Here's what I have (from outer to inner):</p>
  
  <ol>
  <li>A parent element with <code>overflow: scroll</code> and fixed width.</li>
  <li>A vertical list of elements with variable width</li>
  <li>List items have <code>display: flex</code> and <code>flex-direction: row</code></li>
  <li>Inside each list item there is an icon and a label side by side horizontally</li>
  </ol>
  
  <p>I want the list items to take as much width as they need to container their <em>flexed</em> children, as the root parent is scrollable. I can make the icon and label take as much width as they need with <code>flex-shrink: 0</code>.</p>
  
  <p>Problem is: <strong>List items (#3 in the list above) have their width limited to the width of the scrollable parent container, instead of their children.</strong> </p>
  
  <p>This is bad because list items have padding and a colored background. <strong><a href="https://codepen.io/anon/pen/roygyp?editors=1100#0" rel="nofollow noreferrer">Here is an example on CodePen</a></strong>. Scroll horizontally where it says "Lorem ipsum" to see what I mean.</p>
  
  <p>Thanks!</p>