title: Make flex items take content width, not width of parent container
body: <p>I have a container <code>&lt;div&gt;</code> with <code>display: flex</code>. It has a child <code>&lt;a&gt;</code>.  </p>
  
  <p>How can I make the child appear "inline"? </p>
  
  <p>Specifically, how can I make the child's width determined by its content, and not expand to the width of the parent?</p>
  
  <p><strong>What I tried:</strong> </p>
  
  <p>I set the child to <code>display: inline-flex</code>, but it still took up the full width. I also tried all other display properties, but nothing had an effect. </p>
  
  <p><strong>Example:</strong> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    background: red;
    height: 200px;
    flex-direction: column;
    padding: 10px;
    display: flex;
  }
  a {
    display: inline-flex;
    padding: 10px 40px;
    background: pink;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/donpinkus/pen/YGRxRY" rel="noreferrer">http://codepen.io/donpinkus/pen/YGRxRY</a></p>