Flexbox row wrapping issue in Safari

Question

I have a page being dynamically populated with blog posts and I'm using Bootstrap and flex to align them in a grid. This works just fine in the latest versions of Chrome, Firefox, and IE11, but it's not working in Safari version 8. In Safari, the first row wraps one box too early but the other rows wrap fine, which leaves a weird gap at the end of the top row.

See jsfiddle here

CSS:

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

HTML (added random values for testing):

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

Answer 1

Well I feel silly. I just had to put flex-row into a new div that wraps all the single-post boxes. See updated jsfiddle here