title: Safari 8: Flexbox's "justify-content" isn't working at all
body: <p>In Safari 8.0.8 on Macbook.</p>
  
  <p>I'm using <code>flexbox</code> to distribute elements in a grid-like container. </p>
  
  <p>My <code>.eventContainer</code> is parent to multiple <code>.event</code> 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!</p>
  
  <pre><code>&lt;div class="eventContainer"&gt;
      &lt;div class="event"&gt;
          &lt;div class="thumb"&gt;
              &lt;img src="http://imgur.com/JDxjEknb.jpg"&gt;
          &lt;/div&gt;
          &lt;p class="thumbDate"&gt;Fri 18 Sept&lt;/p&gt;
          &lt;p class="thumbArtist"&gt;Event 1&lt;/p&gt;
          &lt;p class="thumbTitle"&gt;Subtitle 1&lt;/p&gt;
          &lt;p class="thumbLocation"&gt;Location&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="event"&gt;
          &lt;div class="thumb"&gt;
              &lt;img src="http://imgur.com/AwA5ga7b.jpg"&gt;
          &lt;/div&gt;
          &lt;p class="thumbDate"&gt;Sat 19 Sept&lt;/p&gt;
          &lt;p class="thumbArtist"&gt;Event 2&lt;/p&gt;
          &lt;p class="thumbTitle"&gt;Title 2&lt;/p&gt;
          &lt;p class="thumbLocation"&gt;Subtitle 2&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="event"&gt;
          &lt;div class="thumb"&gt;
              &lt;img src="http://imgur.com/9z5NkBxb.jpg"&gt;
          &lt;/div&gt;
          &lt;p class="thumbDate"&gt;Sat 19 Sept&lt;/p&gt;
          &lt;p class="thumbArtist"&gt;Event 3&lt;/p&gt;
          &lt;p class="thumbTitle"&gt;Title 3&lt;/p&gt;
          &lt;p class="thumbLocation"&gt;Subtitle 3&lt;/p&gt;
      &lt;/div&gt;
      &lt;!-- Fix for FlexBox --&gt;
      &lt;div class="event"&gt;&lt;/div&gt;
      &lt;div class="event"&gt;&lt;/div&gt;
      &lt;div class="event"&gt;&lt;/div&gt;
      &lt;div class="event"&gt;&lt;/div&gt;
      &lt;div class="event"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>What have I missed here?</p>
  
  <p><strong>JSFiddle Example</strong>: <a href="http://jsfiddle.net/foepzgf8/1/" rel="nofollow">http://jsfiddle.net/foepzgf8/1/</a></p>
  
  <p>Can try it in both Chrome and Safari and see what I mean.</p>