Bulma: Equal height of cards inside column (0.7.1)

[ekntrtmz]

I am trying to achieve equal heights for my multiline columns cards:

<div class="columns is-desktop is-multiline">
    <div class="column  is-one-third-desktop">
        <div class="card has-equal-height ">
            <div class="card-content">.. some content ..</div>
        </div>
    </div>
    <div class="column is-one-third-desktop">
        <div class="card has-equal-height ">
            <div class="card-content">.. some content ..</div>
        </div>
    </div>
    <div class="column is-one-third-desktop">
        <div class="card has-equal-height ">
            <div class="card-content">.. some content ..</div>
        </div>
    </div>
    <div class="column is-one-third-desktop">
        <div class="card has-equal-height ">
            <div class="card-content">.. some content ..</div>
        </div>
    </div>
</div>

I tried the following provided solution, which is not working for me:

.has-equal-height {
    height: 100%;
    display: flex;
    flex-direction: column;
}

Maybe there was a change in the card component or I am missing here something. I would be very happy if someone could help me with this.

_Solution from closed issues:_
Make all columns exact same height #1977
Card height #1723
How to get cards with same height in columns ? #1121
Equal height of card components #218

[emkajeej]

Using your code it seems to work for me. I added support for bottom stickied footers in this pen:
https://codepen.io/anon/pen/xagpgd

Note that equalheighting is _per rendered row only_. You won't be able to get the same height across multiple rows, ie the last card in this example is unaffected by the second, larger card.
You'd have to resort to javascript if you want achieve that. That will open up a can of worms when it comes to resizing and dynamic content and such though.

[ekntrtmz]

@emkajeej thank you for your help.

Turns out the reason why it did not work for me was an encapsulating empty <div> ( which is Vue.js default within <template> but not mandatory for child templates). After removing the useless <div> between div.column and div.card everything worked as provided.