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:

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;
}

  

    

      panel1
    
    

      panel2
    
    

      panel3
    
  
  

    

      panel4