title: Flexbox "align-items : center" shrinks a child's max-width
body: <p>I have a flexbox div <code>container</code> with <code>align-items: center</code>, with three childs. One of them has <code>max-width: 200px</code> (in the code, <code>second-ch</code>), and it's also a flex with two childs distributed with <code>justify-content: space-between</code>, but <code>second-ch</code> is not following its <code>max-width</code>. If I remove <code>align-items: center</code> from <code>container</code>, <code>second-ch</code> takes again the width desired but the remaining elements are not in the center anymore. How can I solve that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  
  .first-ch {
    width: 70px;
    height: 70px;
    background-color: grey;
  }
  
  .second-ch {
    max-width: 200px;
    height: 80px;
    background-color: red;
    display: flex;
    justify-content: space-between;
  }
    .square {
      width: 50px;
      height: 50px;
      background-color: yellow;
      margin: 5px;
    }
  .third-ch {
    width: 50px;
    height: 50px;
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="first-ch"&gt;&lt;/div&gt;
    &lt;div class="second-ch"&gt;
      &lt;div class="square"&gt;&lt;/div&gt;
      &lt;div class="square"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="third-ch"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>