title: Flexbox children rendering wrong in Safari
body: <p>I have the following HTML and css that works great in Firefox and Chrome to create a 3-column grid of boxes. But, in Safari it takes all the boxes and puts them into 1 row, squishing the width of each one so it will fit instead of allowing the float to push the boxes to a new line.</p>
  
  <p>How can I get it to looks the same in Safari, any ideas?
  (note: the html class '.box' is in a loop that dynamically generates boxes based on user input, so the number of boxes is variable)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="home-grid"&gt;
  &lt;div class="box"&gt;
  Contents of box
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#home-grid {
      margin-top: 20px;
      float: left;
      display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
      display: -moz-box;      /* OLD: Firefox (buggy) */
      display: -ms-flexbox;   /* MID: IE 10 */
      display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
      display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
      flex-flow: row wrap;
      justify-content: space-between;
  width: 100%
      }
  #home-grid .box {
          position: relative;
          float: left;
          width: 192px!important;
          height: 180px;
          border: 1px solid #F73987;
          margin-bottom: 20px;
          overflow: hidden;
          }
  </code></pre>