如何将按钮正确对齐到父级的底部？

Question

我使用Flexbox使引导列的高度相等。我这样做：

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

这是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>

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

这将在Chrome上显示，这很好，一切都很好地对齐：

但是在Firefox上，就像这样会给列下面的内容增加问题：

如何通过Flexbox和浏览器兼容性来实现这一目标？

提前致谢！