フレックスフロー：サファリモバイルで列ラップが機能しないクロムでうまく動作します

Question

これをgenotionで開くと正常に動作します。

これを開くと、デバイスのモバイルデバイスの幅が間違っています（このセレクタを持つこの要素の幅） フレックスコンテナの幅は、子の合計と等しくありませんゲノム運動のクロムには問題ありません）。

多くの場合、Safariブラウザでも同じ問題が発生しています。

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

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

https://codepen.io/vish123/pen/OgmvWz

Answer 1

.main-container > .item-1単に

flex-direction: column; 

にflex-flow:column wrapを変更してみてください。方向のためにアイテムを互いに下に配置するので、ラップする必要はありません：列。