title: Force equal height in grid / card content
body: <p>I have a very simple test page</p>
  
  <pre><code>&lt;div class="ui two column stretched grid padded" style="height: 100%;"&gt;
    &lt;div class="column"&gt;
      &lt;div class="ui card fluid"&gt;
        &lt;div class="content"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="ui card fluid"&gt;
        &lt;div class="content"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui card fluid"&gt;
        &lt;div class="content"&gt;
          &lt;h1&gt;Content&lt;/h1&gt;
          &lt;h1&gt;Content&lt;/h1&gt;
          &lt;h1&gt;Content&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(and body is also set to 100%, so that it fill the entire viewport)</p>
  
  <p>Without any content in the third card, this is all equal height, and looks good. When I start adding content to it, it expands and takes space from the second card.</p>
  
  <p>What I'm trying to do, is to force them to have equal height, even when there is content in only one of them.</p>
  
  <p>Any suggestions? (I'm assuming its related to flexbox, but I haven't been able to pin down the issue)</p>