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

オープンフレックス子どもたちがしっかりと包まれているクロムサファリではとchrome.Inでこのページ（コラムラップ） が、中サファリに余分なスペースがあります。なぜこの余分なスペースがあるのか​​分かりません。明確にして修正を提供してください。 また、私は、サファリ1またはクロム1つの

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

正しいとする動作を確認していません