title: prevent wrapping lines in flexbox child element
body: <p>How do I prevent line wrapping of a flexbox element? Is it even possible?</p>
  
  <p>I'm attempting to create a two column grid with flexbox with the following markup:</p>
  
  <pre><code>&lt;div class="flex-container"&gt;
     &lt;div class="no-wrap"&gt;this should not wrap&lt;/div&gt;
     &lt;div class="can-wrap"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam debitis consequuntur incidunt neque vel in blanditiis id optio distinctio culpa rem voluptatibus quas architecto ratione assumenda omnis laboriosam? Earum esse.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>.no-wrap</code> element should only be as wide as it 'needs to be' such that all of the text inside does not wrap to a second line. The <code>.can-wrap</code> element will take up the remaining space, and wrap if need be.</p>
  
  <p>I'm using this CSS (with prefrix free):</p>
  
  <pre><code>.flex-container{
    display:flex;
  }
  
  .no-wrap{
    flex-basis:initial;
  }
  </code></pre>
  
  <p>I thought the <code>flex-basis:initial</code> would prevent the element from wrapping lines - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis</a></p>
  
  <p>Here's a codepen: <a href="http://codepen.io/jshawl/pen/bknAc" rel="noreferrer">http://codepen.io/jshawl/pen/bknAc</a></p>
  
  <p>I know I can fix the width of the <code>.no-wrap</code> element, but how can I make it be as wide enough to prevent line wrapping? </p>
  
  <p>The float equivalent for the <code>.no-wrap</code> element would be:</p>
  
  <pre><code>.no-wrap{
    display:block;
    float:left; /* be as wide as need be! */
  }
  </code></pre>