title: Flexbox: how to get divs to fill up 100% of the container width without wrapping?
body: <p>I'm in the process of updating an old <code>inline-block</code>-based grid model I have to a newer Flexbox one I created. Everything has worked fine, apart from one little snag, which has become a bit of a dealbreaker:</p>
  
  <p>I have a bunch of CSS-controlled sliders; so there's a containing wrapper with 100% width, and inside is another div: its width is also 100%, but its <code>white-space</code> is set to <code>nowrap</code>. Using <code>inline-block</code>, this meant that the internal divs (which were <em>also</em> set to 100% width) wouldn't be bound by their parents' constraints and wrap onto the next line - they'd just carry on flowing out of the box. This is exactly what I wanted. However, I cannot get this to work at all with flexbox. For reference, here's an image:</p>
  
  <p><img src="https://i.stack.imgur.com/W4UUD.png" alt="Flexbox problem"></p>
  
  <p>And for reference, here's a jsFiddle of the thing working with inline-block: <a href="http://jsfiddle.net/5zzvqx4b/" rel="noreferrer">http://jsfiddle.net/5zzvqx4b/</a></p>
  
  <p>...and <em>not</em> working with Flexbox: <a href="http://jsfiddle.net/5zzvqx4b/1/" rel="noreferrer">http://jsfiddle.net/5zzvqx4b/1/</a></p>
  
  <p>I've tried all kinds of variations with <code>flex</code>, <code>flex-basis</code>, <code>flex-wrap</code>, <code>flex-grow</code>, etc. but for the life of me I can't get this to work. </p>
  
  <p>Note that I <em>can</em> force it to do what I want in a hacky, inflexible way by setting the <code>.boxcontainer</code> width to <code>200%</code>. That works for this single example, but in some cases I won't know beforehand how many child boxes there will be, and I'd rather not resort to inline styling on each element if possible.</p>