title: Flexbox: How to make images equal height in flex items?
body: <p>Okay, so I'm trying to display images with equal width and height inside 6 flexbox items.</p>
  
  <p>In screen size with <code>min-width: 768px</code> each flex-item grows to 1 when there is 30% space, i.e. <em>flex: 1 30%;</em> <em>flex-direction: is changed to row;</em></p>
  
  <p><strong>The</strong> <strong>problem</strong>: The flex item divs themselves are equal in height and width but the image inside each flex item are various sizes. </p>
  
  <p><strong>Attempt</strong>: Tried align-items: stretch; and even giving min-height to each image doesn't work?</p>
  
  <p><strong>Also is flex-wrap even necessary when using flex: 1 30%?</strong> </p>
  
  <p>I'm clearly doing something wrong, any ideas?</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>/* ## Services */
  .services-wrap {
    text-align: center;
    padding-top: 4rem;
  }
  
  .services-flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  
  .service-img {
    min-height: 100% !important;
    /*width: 100%;*/
  }
  
  @media screen and (min-width: 768px) {
    .services-flex {
      flex-direction: row;
      padding: 0 4rem;
      flex-wrap: wrap;
      align-items: stretch;
      max-width: 1500px;
      margin: auto;
    }
    .flex-box {
      flex: 1 30%;
      /*margin: 1rem;*/
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="services-wrap"&gt;
    &lt;h3&gt;OUR SERVICE&lt;/h3&gt;
    &lt;hr&gt;
    &lt;div class="services-flex"&gt;
      &lt;div id="service-box" class="flex-box"&gt;
        &lt;img class="service-img" src="&lt;?php bloginfo('template_url'); ?&gt;/images/service-img/comercial.jpg"&gt;
      &lt;/div&gt;
      &lt;div id="service-box" class="flex-box"&gt;
        &lt;img class="service-img" src="&lt;?php bloginfo('template_url'); ?&gt;/images/service-img/residential.jpg"&gt;
      &lt;/div&gt;
      &lt;div id="service-box" class="flex-box"&gt;
        &lt;img class="service-img" src="&lt;?php bloginfo('template_url'); ?&gt;/images/service-img/rural.jpg"&gt;
      &lt;/div&gt;
      &lt;div id="service-box" class="flex-box"&gt;
        &lt;img class="service-img" src="&lt;?php bloginfo('template_url'); ?&gt;/images/service-img/industrial.jpg"&gt;
      &lt;/div&gt;
      &lt;div id="service-box" class="flex-box"&gt;
        &lt;img class="service-img" src="&lt;?php bloginfo('template_url'); ?&gt;/images/service-img/other.jpg"&gt;
      &lt;/div&gt;
      &lt;div id="service-box" class="flex-box"&gt;
        &lt;img class="service-img" src="&lt;?php bloginfo('template_url'); ?&gt;/images/service-img/other.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE</strong> </p>
  
  <p>Okay I think the issue was that 2 of the 6 image sizes were to small like 200 by 250 vs the rest which was 600-1200px. So I've fixed this by having larger image sizes initial so the image is not distorted and also grows in equal. </p>
  
  <p>Notice the first and the last image heights are not equal, but why?</p>
  
  <p><strong><em>Please check the CSS again as I have updated it with the changes to match the image above!</em></strong></p>
  
  <p>Please help, thank you!</p>