title: Make flex container width grow as its children
body: <p>This is simplified layout:</p>
  
  <pre><code>&lt;div class="root"&gt;
    &lt;div class="container"&gt;
      &lt;div class="cell"&gt;
        &lt;input type="text" class="contact"&gt;&lt;/input&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is simplified CSS:</p>
  
  <pre><code>.root {
    background-color: red;
    overflow: auto;
    width: 300px;
  
  }
  
  .container {
    background-color: green;
    display: flex;
    height: 50px;
  }
  
  .cell {
    background-color: black;
    height: 30px;
  }
  
  .contact {
    width: 400px;
  }
  </code></pre>
  
  <p>This is <a href="https://jsfiddle.net/AlexandrAbakumov/rnky40mo/1/" rel="noreferrer">jsFiddle</a>.</p>
  
  <p>It is somewhat unexpected to me that the <code>container</code> width isn't the same as it is required by its child and rather is as limited by the <code>root</code> <code>div</code>. You can see in this jsFiddle that red area (root <code>div</code>) isn't filled with the green <code>container</code> <code>div</code>.</p>
  
  <p>Could someone explain why <code>flex</code> container width doesn't grow as its children and how to fix that?</p>