title: How can I make a flexbox parent have the width of its children?
body: <p>I have a parent element, with two elements inside:</p>
  
  <pre><code>&lt;div class="parent"&gt;
    &lt;div class="child"&gt;
       one
    &lt;/div&gt;
    &lt;div class="child"&gt;
      two
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently, the .parent is 100% wide. I would like it only to be the width of the two children.</p>
  
  <pre><code>.parent {
    display: flex;
    background-color: aliceblue;
  }
  </code></pre>
  
  <p><strong>How can I make the parent to be the width of it's contents, and not wider?</strong></p>
  
  <p><a href="http://codepen.io/anon/pen/qOgdEg" rel="noreferrer">See codepen for a live demo.</a></p>