Html Safari中的Flexbox行包装问题

我有一个动态填充博客文章的页面，我使用Bootstrap和flex在网格中对齐它们。这在最新版本的Chrome、Firefox和IE11中运行良好，但在Safari版本8中不起作用。在Safari中，第一行太早包装了一个盒子，但其他行包装得很好，这在第一行的末端留下了一个奇怪的间隙

CSS:

HTML（添加用于测试的随机值）：

2015年9月30日
这是一个很长的标题
这是很多关于东西的话

2015年9月30日
这是一个很长的标题
这是很多关于东西的话

2015年9月30日
简称
2015年9月30日
这是一个很长的标题
这是很多关于东西的词汇，还有其他的东西

2015年9月30日
这是一个很长的标题
这是很多关于东西的话

2015年9月30日
有点长的标题
一些词

2015年9月30日
这是一个很长的标题
这是很多关于东西的话

2015年9月30日
这是一个较短的标题
还有一些话

我觉得自己很傻。我只需要将

flex行

放入一个新的div中，该div封装了所有

单个post

框

.flex-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-direction: row;
    flex-wrap: wrap;
}
.single-post {
    padding: 50px 0 0;
    border: 1px solid #000;
    margin-bottom: 10px;
}
.posts__content-section {
    padding: 20px;
}
.button--more {
    padding: 5px;
    text-transform: uppercase;
    color: #fff;
    background: #000;
    font-size: 12px;
}

<div class="container">
    <div class="row flex-row">

        <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>short title</h4>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff and things and stuff and other things and stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>sort of long title</h4>
                 <p>some words</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a shorter title</h4>
                 <p>and some more words</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->

    </div>
</div>