title: Flex-grow not working as expected (flex items don't have the widths I expect)
body: <p><a href="http://jsfiddle.net/JTEhW/1/" rel="nofollow">JSFiddle</a></p>
  
  <p>I'm trying to use <code>flex</code> CSS properties to fit a set of elements into a neat little box.</p>
  
  <p>It looks exactly how I want it in IE10, but Chrome shows it very different. I basically have:</p>
  
  <ul>
  <li>Container
  <ul>
  <li>Select box (<code>flex:5</code>), should be about wide enough to show the <code>D</code>, but not much wider.</li>
  <li>Text input (<code>flex:10</code>), should take up a little more than half the width of the contains</li>
  <li>Confirm button (<code>flex:6</code>), should be wide enough to contain its text, but not much more.</li>
  </ul></li>
  </ul>
  
  <p>It works fine in IE, but in Chrome the first two elements take up 50% of the width each, leaving the confirmation button falling off the end.</p>
  
  <p>Is my Flex logic wrong, or is Chrome messing up?</p>