title: Centering multiple elements with flexbox - flex-flow: row wrap puts every child in separate row
body: <p>I have the following layout:</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>.app-container {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: space-around;
    min-height: 100vh;
    background-color: #4caf50;
    font-family: "Roboto", "Noto", sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.87);
    margin-bottom: 84px;
  }
  
  .card {
    background-color: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.12);
    margin: 8px;
    border-radius: 2px;
    min-width: 304px;
    max-width: 466px;
    font-family: 'Roboto', 'Noto', sans-serif;
    flex-grow: 1;
  }
  
  .card .text {
    padding: 16px 16px 25px 16px;
    font-size: 14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="app-container"&gt;
      &lt;div class="card"&gt;
        &lt;div class="text"&gt;
          &lt;p&gt;One&lt;/p&gt;
          &lt;p&gt;Two&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="text"&gt;
          &lt;p&gt;One&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="text"&gt;
          &lt;p&gt;One&lt;/p&gt;
          &lt;p&gt;Two&lt;/p&gt;
          &lt;p&gt;Three&lt;/p&gt;
          &lt;p&gt;Four&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="text"&gt;
          &lt;p&gt;One&lt;/p&gt;
          &lt;p&gt;Two&lt;/p&gt;
          &lt;p&gt;Three&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now what I want to happen is for the <code>.card</code> divs to float naturally to be on the same line where there is space, but remain centered vertically and horizontaly (so the height of the cards remains the same instead of the cards expanding to fill the whole row regardless of the contet).</p>
  
  <p>What happens is that if I do not set <code>display:inline-block;</code> my <code>.card</code> divs just stay one per row. But if I change the display, the centering stops working.</p>
  
  <p>How do I fix this?</p>