Safari 8:Flexbox的"合理内容"根本不起作用

Question

在Macbook上的Safari 8.0.8中.

我正在使用flexbox在类似网格的容器中分发元素.

我.eventContainer是多个.event框的父级,应该通过flexbox分布在各行中.它在Firefox和Chrome中运行良好,但Safari会在自己的行上显示事件,而不是彼此相邻!

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

我错过了什么？

JSFiddle示例:http://jsfiddle.net/foepzgf8/1/

可以在Chrome和Safari中试用它,看看我的意思.

Answer 1

实际上并非justify-content在这种情况下.当您运行与Flexbox的问题,这是一件好事,回去和定义flex-grow,flex-shrink以及flex-basis对Flexbox的容器的孩子.

如果您将此添加到.event您的问题将被解决:

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

更新小提琴:http://jsfiddle.net/foepzgf8/5/