title: Flexbox row: doesn't grow according to content?
body: <p>I have the following structure, and I'd like to understand why my row does not grow with its inner content.</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>.row {
    border:solid red;
    display: flex;
    flex-direction: row;
  }
  
  
  .cell {
    border: solid green;
    flex: 0 0 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="cell"&gt;
     cell 1
    &lt;/div&gt;
    &lt;div class="cell"&gt;
     cell 2
    &lt;/div&gt;
    &lt;div class="cell"&gt;
     cell 3
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/slorber/v6xp917z/1/" rel="nofollow noreferrer">JsFiddle</a></p>
  
  <p>I don't want the cells to grow or shrink, they should always be 400px width. The parent should grow and overflow the window, and an horizontal scrollbar is expected.</p>
  
  <p>In the above example, the red border should be around the green border. The green border has the expected dimensions, not the red one.</p>
  
  <p>I don't want to set a static width to my row for maintainability reasons related to my usecase.</p>
  
  <p>I'm open for non-flexbox solutions (see <a href="http://jsfiddle.net/slorber/v6xp917z/17/" rel="nofollow noreferrer">inline-block attempt</a>), but would appreciate more a flexbox one (because I need <code>align-items: center</code> behavior on the row)</p>