title: align-content: center not working in Chrome
body: <p>I am trying to vertically align divs with flexbox, by using the <em>align-content: center</em>. It works fine in Firefox and IE, but it does not vertically align in Chrome. In Chrome the divs stays on top.</p>
  
  <pre><code>&lt;div class="products-wrapper"&gt;
        &lt;div class="product"&gt;
            &lt;img src="images/temporary.jpg" alt="Temporary"&gt;
            &lt;h3&gt;Title&lt;/h3&gt;
            &lt;p&gt;Text.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="product"&gt;
            &lt;img src="images/temporary.jpg" alt="Temporary"&gt;
            &lt;h3&gt;Title&lt;/h3&gt;
            &lt;p&gt;Text.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="product"&gt;
            &lt;img src="images/temporary.jpg" alt="Temporary"&gt;
            &lt;h3&gt;Title&lt;/h3&gt;
            &lt;p&gt;Text.&lt;/p&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.products-wrapper {
      width: 100%;
      min-height: 100vh;
      /* FLEX */
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
  }
  
  .product {
      max-width: 250px;
      padding: 10px;
  }
  
  .product img {
      display: block;
      margin: 0 auto;
      max-height: 250px;
      max-width: 250px;
  }
  </code></pre>
  
  <p>I have also been trying <em>align-items: center;</em> which centers the divs vertically, but it will not be a straight line with the images and text if I have different amount of text for example.</p>
  
  <p>Anyone with a solution how to vertically center divs (straight), which works in all browsers?</p>
  
  <p>Image example:</p>
  
  <p><img src="https://i.stack.imgur.com/uT6Ng.jpg" alt="Image example"></p>
  
  <p><strong>Edit:</strong> If you don't need the height to be dynamic, <em>align-items: center;</em> will work with (for example) <em>max-height: 400px;</em> on the .product div. Not really what I wanted though.</p>