Safari中Flexbox子项呈现错误

我有以下HTML和css，它们在Firefox和Chrome中非常适用，可以创建一个3列的框网格。但是，在Safari中，它会把所有的盒子都放进一行，挤压每个盒子的宽度，使其适合，而不是让浮子把盒子推到一行。

我怎样才能让它在Safari中看起来一样，有什么想法吗？（注意：html类'.box'处于一个循环中，该循环根据用户输入动态生成框，因此框的数量是可变的）

HTML:

<div id="home-grid">
<div class="box">
Contents of box
</div>
</div>

CSS：

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