How to create equal-height columns using Materialize and Flexbox?

Question

I am trying to use Flexboxes in order to strech a panel I created using Materialize.

This is the html that creates my panels:

<div class="row">   
    <div class="col s6">
        <div class="card-panel">
            panel1
        </div>
        <div class="card-panel">
            panel2
        </div>
        <div class="card-panel">
            panel3
        </div>
    </div>
    <div class="col s6">
        <div class="card-panel">
            panel4
        </div>
    </div>
</div>

And this is the result:

Now I would like to strech panel4 in order to make it flush with the bottom of panel3.

Probably this is possible using Flexbox but I can't figure out how to get Materialize and Flexbox to work together

Answer 1

Materilize uses floats which will be negated under flexbox, so we will have to lay out each column separately using flexbox and flex-direction:Column.

Then we tell each card-panel to be to take upas much space as it can using flex:1.

Like so:

.row {
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
}

.card-panel {
  flex: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div class="row">
  <div class="col s6">
    <div class="card-panel">
      panel1
    </div>
    <div class="card-panel">
      panel2
    </div>
    <div class="card-panel">
      panel3
    </div>
  </div>
  <div class="col s6">
    <div class="card-panel">
      panel4
    </div>
  </div>
</div>