Safari 8: Flexbox's "justify-content" isn't working at all

Question

In Safari 8.0.8 on Macbook.

I'm using flexbox to distribute elements in a grid-like container.

My .eventContainer is parent to multiple .event boxes which should be distributed across the rows by flexbox. It works fine in Firefox and Chrome but Safari displays the events on their own line, rather than next to each other!

<div class="eventContainer">
    <div class="event">
        <div class="thumb">
            <img src="http://imgur.com/JDxjEknb.jpg">
        </div>
        <p class="thumbDate">Fri 18 Sept</p>
        <p class="thumbArtist">Event 1</p>
        <p class="thumbTitle">Subtitle 1</p>
        <p class="thumbLocation">Location</p>
    </div>
    <div class="event">
        <div class="thumb">
            <img src="http://imgur.com/AwA5ga7b.jpg">
        </div>
        <p class="thumbDate">Sat 19 Sept</p>
        <p class="thumbArtist">Event 2</p>
        <p class="thumbTitle">Title 2</p>
        <p class="thumbLocation">Subtitle 2</p>
    </div>
    <div class="event">
        <div class="thumb">
            <img src="http://imgur.com/9z5NkBxb.jpg">
        </div>
        <p class="thumbDate">Sat 19 Sept</p>
        <p class="thumbArtist">Event 3</p>
        <p class="thumbTitle">Title 3</p>
        <p class="thumbLocation">Subtitle 3</p>
    </div>
    <!-- Fix for FlexBox -->
    <div class="event"></div>
    <div class="event"></div>
    <div class="event"></div>
    <div class="event"></div>
    <div class="event"></div>
</div>

CSS:

.eventContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.event {
    display: inline-block;
    margin-bottom: 35px;
    width: 100%;
    max-width: 200px;
    margin-right: 15px;
    cursor: pointer;
}

What have I missed here?

JSFiddle Example: http://jsfiddle.net/foepzgf8/1/

Can try it in both Chrome and Safari and see what I mean.

Solution

It's actually not justify-content in this situation. When you run into issues with flexbox, it's always good to go back and define flex-grow, flex-shrink, and flex-basis on the children of the flexbox container.

If you add this to .event your issue will be resolved:

-webkit-flex: 1 0 200px;
flex: 1 0 200px;

Updated fiddle: http://jsfiddle.net/foepzgf8/5/