Flex-flow：柱子在safari中不起作用手机在chrome中工作正常

Question

如果我们在genymotion中打开它，它可以正常工作。

但是，如果我们打开这是狩猎IOS设备移动的元件的宽度是错误的（该元件的宽度具有该选择器.main-container > .item-1） 该柔性容器的宽度不等于求和子的（这是在genymotion中的铬罚款）。

即使在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

试着将flex-flow:column wrap简单

flex-direction: column; 

到.main-container > .item-1。您不需要包装它，因为由于方向：列将已经将项目放置在彼此之下。