title: Bootstrap 4 card height stretching
body: <p>For some reason, when I try to use Bootstrap 4's card columns, the height of the shorter card will end up stretching to be equal with the one beside it. This only happens if I apply the 'row' class to the parent div. However, if I remove the 'row' class, the cards stack on top of each other in Chrome (this is a known bug, though I haven't found another solution to it yet) and don't stack on a smaller screen size in Safari. The other issue I've encountered is that if I apply 100% height to the cards, they won't stretch, but the card underneath it won't come up closer to the one above it so there's a big gap.</p>
  <p>I thought the point of using card columns in this way was to achieve the Masonry look, but it doesn't seem to be behaving that way for me. I'm guessing it may have something to do with the flexbox properties on the 'row' class, but it seems like I need that in order for them to be laid out side by side in 2 columns.</p>
  <p>Below is my code. Let me know if any of you have a solution to this. Thank you in advance!</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>.row {
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -ms-flex-wrap:nowrap;
      flex-wrap:nowrap;
      margin-right: 30px;
      margin-left: 30px;
  }
  
  .card-columns .card {
      width: 320px !important;
      display: inline-block !important;
      height: auto;
  }
  
  .card-columns {
      -webkit-column-count: 2 !important;
      -moz-column-count: 2 !important;
      column-count: 2 !important;
      -webkit-column-gap: 1.25rem;
      -moz-column-gap: 1.25rem;
      column-gap: 1.25rem
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
        &lt;div class="card-columns row"&gt;
        &lt;div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered"&gt;
          &lt;div class="my-3 p-3"&gt;
            &lt;h3 class="display-6"&gt;TITLE&lt;/h3&gt;
            &lt;p class="lead-portfolio"&gt;Some text&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
            
        &lt;div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered"&gt;
          &lt;div class="my-3 p-3"&gt;
            &lt;h3 class="display-6-dark"&gt;TITLE&lt;/h3&gt;
            &lt;p class="lead-portfolio-dark"&gt;Some text&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>