title: Using equal height of css class using flexbox when parent is already using flex to justify content
body: <p>I have mulitple rows of 3 columns. In each column there is a main content <code>SavedSearchBox-content</code> (has different permutations, so height can differ) and a footer <code>SavedSearchBox-footer</code></p>
  
  <p>I am using flexbox so that I can use 3 columns and have space between, so only the middle column has space horizontally.</p>
  
  <p>This is my HTML structure of a sample row with 3 columns with 3 permutations.</p>
  
  <ul>
  <li>With Pill and button</li>
  <li>No pill, no button</li>
  <li>With pill, no button</li>
  </ul>
  
  <pre><code>&lt;div class="SavedSearches-wrapper"&gt;
    &lt;div class="SavedSearchBox"&gt;
      &lt;div class="SavedSearchBox-content"&gt;
        &lt;h1 class="SavedSearchBox-title"&gt;This is a longer title for testing&lt;/h1&gt;
        &lt;p class="SavedSearchBox-tagline"&gt;This is a tag line&lt;/p&gt;
        &lt;a href="javascript:;" class="SavedSearchBox-searchLink"&gt;This is a link&lt;/a&gt;
        &lt;div class="SavedSearchBox-propertyCount"&gt;
          &lt;div class="Pill"&gt;4 New&lt;/div&gt; &lt;strong&gt;searches&lt;/strong&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="SavedSearchBox-footer"&gt;&lt;a class="Button "&gt;Subscribe to this Alert&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="SavedSearchBox"&gt;
      &lt;div class="SavedSearchBox-content"&gt;&lt;h1 class="SavedSearchBox-title"&gt;This is a title&lt;/h1&gt;
        &lt;p class="SavedSearchBox-tagline"&gt;This is a tagline&lt;/p&gt;
        &lt;a href="javascript:;" class="SavedSearchBox-searchLink"&gt;This is a link&lt;/a&gt;
        &lt;div class="SavedSearchBox-propertyCount"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="SavedSearchBox-footer"&gt;
        &lt;div class="RadioListToggler SavedSearchBox-Toggler"&gt;
          &lt;a href="javascript:;" class="RadioListToggler-Link"&gt;Change alert frequency&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="SavedSearchBox"&gt;
      &lt;div class="SavedSearchBox-content"&gt;&lt;h1 class="SavedSearchBox-title"&gt;This is a title&lt;/h1&gt;
        &lt;p class="SavedSearchBox-tagline"&gt;This is a tagline&lt;/p&gt;
        &lt;a href="javascript:;" class="SavedSearchBox-searchLink"&gt;This is a link&lt;/a&gt;
        &lt;div class="SavedSearchBox-propertyCount"&gt;
          &lt;div class="Pill"&gt;6 New&lt;/div&gt; &lt;strong&gt;searches&lt;/strong&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="SavedSearchBox-footer"&gt;
        &lt;div class="RadioListToggler SavedSearchBox-Toggler"&gt;
          &lt;a href="javascript:;" class="RadioListToggler-Link"&gt;Change alert frequency&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my css, the wrapper is using flex and justify content.</p>
  
  <pre><code>.SavedSearches-wrapper {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      justify-content: space-between;
  }
  
  .SavedSearchBox {
      max-width: 340px;
      width: calc((100%/3) - 64px);
      border: 1px solid #d8d8d8;
      display: inline-block;
      vertical-align: top;
      margin: 20px 0px;
      background: #ffffff;
  }
  
  .SavedSearchBox .SavedSearchBox-content {
      padding: 22px 22px 0px 22px;
  }
  </code></pre>
  
  <p>My question is, is there a way that all <code>SavedSearchBox-content</code> have equal heights without compromising the 3 column layout with <code>space-between</code>? I would prefer not to us a javascript solution if possible.</p>
  
  <p><a href="https://jsfiddle.net/tnexu6md/11/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><a href="https://i.stack.imgur.com/Yeu0M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yeu0M.png" alt="Screenshot"></a></p>