Make flex child equal height of parent inside of grid column

Question

I'm trying to build a pricing table where each column contains a card. I want all cards to stretch to the height of their parent (.col) elements.

Note: I'm using Bootstrap 4, and trying to achieve this with the existing grid system (for the sake of consistency) and with this particular piece of markup. I can't get the cards to grow to the height of their parent containers. Is this even possible with the current markup?

The basic markup is this:

<div class="row">
    <div class="col">
        <div class="card">
          blah
          blah
          blah
        </div>
        <div class="card">
          blah
        </div>
        <div class="card">
          blah
        </div>
    </div>
</div>

Here is my pen: https://codepen.io/anon/pen/oZXWJB

Answer 1

Add flex-grow : 1; to your .card rule. HTML markup is fine.

.row {
  display: flex; 
  flex-flow: row wrap; 
  background: #00e1ff;
  margin: -8px;
}
.col { 
  display: flex; 
  flex: 1 0 400px;
  flex-flow: column; 
  margin: 10px;
  background: grey;
}
.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

You may also look at Foundation 6 Equalizer plugin. They use JavaScript though.

Answer 2

You just need to add height: 100% on .card

.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  height: 100%;
}

DEMO