title: How does a flexbox expand to it's child on overflow?
body: <p>I have a flexbox layout. </p>
  
  <p>The html is as follows:</p>
  
  <pre><code>&lt;div class="grid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="column"&gt;Content&lt;/div&gt;
      &lt;div class="column"&gt;Content2&lt;/div&gt;
      &lt;div class="column"&gt;Content2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="column"&gt;Content&lt;/div&gt;
      &lt;div class="column"&gt;Content2&lt;/div&gt;
      &lt;div class="column"&gt;Content2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>.grid {
    overflow: auto;
    width: 500px;
    height: 400px;
    background-color: #eee;
  
    display: flex;
    flex-direction: column;
  }
  
  .row {
    background-color: #ddd;
    align-items: stretch;
    display: flex;
    border: 2px solid black;
  }
  
  .column {
    flex: 1 0 20em;
    padding: 0.2em;
    border: 2px solid lightblue;
    /*background-color: hsla(0, 100%, 80%, 50%);*/
  }
  </code></pre>
  
  <p>(see <a href="https://jsfiddle.net/bz71qptu/1/" rel="nofollow">https://jsfiddle.net/bz71qptu/1/</a>)</p>
  
  <p>In the previous code, the <code>.box</code> element does not expand to the width of its children. How do I make it do this?</p>
  
  <h3>Edit</h3>
  
  <p>I have added an example of what I am hoping to achieve visually to the jsfiddle</p>
  
  <h3>Edit 2</h3>
  
  <p>I needed to change the question slightly to fit my particular issue. The parent element is aligned with <code>flex-direction: column</code> which means that using <code>min-width</code> doesn't seem to work. The <code>min-width</code> solution would be perfect without this.</p>
  
  <h3>Edit 3</h3>
  
  <p>I'm very thankful to everyone for helping, but I'm not sure I've exactly captured the behaviour I wanted to in my example, and even with all the advice I've been given I can't seem to make it do what I want. Here is a much better <a href="https://jsfiddle.net/bz71qptu/1/" rel="nofollow">jsfiddle</a>, if you look at this I've put borders up to show where everything is. I've read through the answers to see if I can adapt them to my situation, but I can't quite see it. I apologise if this fiddle is already answered.</p>