title: Stretch column to fill remaining row height
body: <p>So I've been looking around for a solution to this and I cannot find one anywhere.</p>
  
  <p>I've tried <code>flex-grow: 1;</code>, <code>align-self: stretch;</code> and a few other <code>flexbox</code> properties but none seem to do the trick.</p>
  
  <p>I would like to get the last column to stretch and take up the remaining height from the row.</p>
  
  <p>Following what everyone has said I've made some adjustments, still not quite what I need it to be however.</p>
  
  <p>(The blue box is what I want to stretch)</p>
  
  <p>View the below snippet:</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>.product {
    border: 1px solid rgba(0,0,0,.2);
    padding: 15px;
    height: 100%;
  }
  
  .product .image {
    padding-bottom: 100%;
    background: rgba(255,0,0,.2);
    margin-bottom: 15px;
  }
  
  .product .content {
    border: 1px solid blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          
          &lt;div class="col-4"&gt;
              &lt;div class="product"&gt;
                &lt;div class="image"&gt;&lt;/div&gt;
                &lt;div class="content"&gt;
                  The height of this is dynamic.
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="col-4"&gt;
              &lt;div class="product"&gt;
                &lt;div class="image"&gt;&lt;/div&gt;
                &lt;div class="content"&gt;
                  It can vary from product to product, but I would like this class to stretch.
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="col-4"&gt;
              &lt;div class="product"&gt;
                &lt;div class="image"&gt;&lt;/div&gt;
                &lt;div class="content"&gt;
                  To fill the rest of the columns height.
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>