How do I properly align buttons to the bottom of the parent?

Question

I`m using Flexbox to make the height of the bootstrap columns equal. I do this with:

.u-row--eqheight {
    display: flex;
    flex-wrap: wrap;
}

.u-row--eqheight:before,
.u-row--eqheight:after {
    display: block;
}

.u-row--eqheight > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

This is the HTML:

 <div class="row u-row--eqheight">
    <?php foreach($posts as $post) : ?>
        <div class="col-xxs-24 col-xs-8 col-md-8 blog">
            <a href="<?= adjustURL($post->getPermalink()) ?>"> 
                <?php if ($featuredImage = $post->getFeaturedImage()) : ?>
                    <div class="blog__image" style="background-image: url(<?= $featuredImage->getFullSizeImage() ?>)"></div>
                <?php endif ?>

                <div class="blog__title">
                    <?= $this->htmlEscape($post->getPostTitle()) ?>
                </div>

                <div class="blog__caption">
                    <?= trimExcerpt($post->getPostExcerpt()) ?>
                </div>

                <div class="blog__read-more">Lees verder</div>
            </a>
        </div>
    <?php endforeach ?>
</div>

This is the SCSS:

.blog {
    margin-bottom: $mb-twenty;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.blog a {
    display: flex;
    flex-flow: column nowrap;
    text-decoration: none;
    height: 100%;
}

.blog__image {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 64%;
    margin-bottom: $mb-ten;
}

.blog__title {
    font-family: 'Asap', $font-fallback-sans-serif;
    font-size: 1.188rem;
    font-weight: 700;
    line-height: 1.188rem;
    margin-bottom: $mb-ten;
    word-break: break-word;
}

.blog__caption {
    color: $gray-dark;
    margin-bottom: $mb-ten;
    word-break: break-word;
}

.blog__read-more {
    margin-top: auto;
    text-align: right;
}

This will turn out as this on Chrome which is fine, everything is nicely aligned:

But on Firefox it is like this which adds problems to content below the columns:

How do I do this propery with Flexbox and browser compatibility?

Thanks in advance!