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
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: