Safari的問題與柱包裹

Question

HTML：

<div class = "main-container"> 
    <div class = "item-1"> 
    <div class = "simple_list1"> 
     <div class = "header_left"> 
     <div class = "it-1">Predictive analysis</div> 
     <div class = "it-2">Cool idea</div> 
     </div> 
    </div> 
    <div class = "simple_list2">Current Analysis</div> 
    </div> 
    <div class = "item-2">Java</div> 
</div> 

CSS：

.main-container{ 
    display:flex; 
    flex-flow:row wrap; 
    width:350px; 
    height:46px; 
    border:1px solid red; 
} 
.main-container > .item-1{ 
    display:flex; 
    width:auto; 
    flex-flow:column wrap; 
    border:1px solid blue; 

} 

.main-container > .item-2{ 
    display:flex; 
    width:auto; 
    margin-left:auto!important; 
    border:1px solid green; 
} 
.header_left{ 
    display:flex; 
    width:auto; 
    flex-flow:row wrap; 
    border:2px solid red; 
} 

打開這個頁面在Safari和chrome.In鉻柔性孩子緊緊包裹（列套） 但在Safari瀏覽器中有一個額外的空間，我不確定爲什麼這個額外的空間在那裏請澄清並提供修復。 還我不知道它的行爲是正確的，Safari瀏覽器的一個或鉻一個

Answer 1

display: -webkit-flex;      /* Safari */ 
     -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */ 

Answer 2

使用供應商前綴

.main-container > .item-2{ 
    display:flex; 
    display:-webkit-flex; 
    width:auto; 
    margin-left:auto!important; 
    border:1px solid green; 
} 
.header_left{ 
    display:-webkit-flex; 
    width:auto; 
    -webkit-flex-flow:row wrap; 
    border:2px solid red; 
}