在Safari中未正确堆叠的Flex项目

Question

我已经制作了一个flex布局，其中四个列/框并排地坐在父div内。我在980px添加了一个媒体查询，它增加了列的宽度，并添加了一个flex-wrap，将两个右列推到一个新行上，创建了2 x 2样式布局。这适用于除Safari之外的所有浏览器，其结果非常不可预测。

小提琴：https://jsfiddle.net/gjy1t16p/6/

如果你认为这在Chrome和拖动下面980px的窗口，它会在我上面描述的方式工作。然而，在Safari中，虽然我没有设法重新确定问题的存在，但盒子却是垂直堆叠。

正如我所提到的，结果是不可预测的 - 在我的网站上实现时，布局实际上比我在制作的小提琴更接近工作。在网站上，2 x 2布局可以工作，但前提是第四个框中没有文本/小部件。一旦它包含达到盒子全宽的内容，它会向下移动到左边，并位于第三个盒子下面，就像我在其后尝试添加的任何其他盒子一样。

如果有人遇到过这个bug并知道如何解决它，我会很感激。我花了整整一天的时间来修复它，我完全没有想法。

HTML：

<footer class="footer"> 

<div class="footer-container"> 

<div class="footer-column" id="column-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div> 

<div class="footer-column" id="column-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div> 

<div class="footer-column" id="column-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div> 

<div class="footer-column" id="column-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div> 

</div> 

</footer> 

CSS：

.footer { 
    height: auto; 
    width: 100%;   
    background-color: #efefef; 
    display:-webkit-box; 
    display:-webkit-flex; 
    display:-ms-flexbox; 
     display:flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
     flex-direction: column; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
     align-items: center; 
} 

.footer-container { 
    width:85%; 
    height:inherit; 
    margin-top:60px; 
    overflow:hidden; 
    display:-webkit-box;   
    display:-webkit-flex;  
    display:-ms-flexbox;   
     display:flex;  
    -webkit-box-pack: justify; 
    -webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
     justify-content: space-between; 
} 

.footer-column { 
    min-width:20%; 
    max-width:20%; 
    margin-bottom:40px; 
} 

#column-1 {background-color:red} 
#column-2 {background-color:yellow} 
#column-3 {background-color:blue} 
#column-4 {background-color:green} 

@media only screen 
and (min-width : 0px) 
and (max-width : 980px) { 

.footer-container { 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
     flex-wrap: wrap; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
     flex-direction: row; 

} 

.footer-column { 
    margin-bottom:50px; 
    min-width:45% !important; 
    max-width:45% !important; 
} 

} 

Answer 1

尝试用他们的弯曲等同替换min-width和max-width声明你。

取而代之的是：

.footer-column { 
    min-width: 20%; 
    max-width: 20%; 
    margin-bottom: 40px; 
} 

.footer-column { 
    min-width: 45% !important; 
    max-width: 45% !important; 
    margin-bottom: 50px; 
} 

试试这个：

.footer-column { 
    flex: 0 0 20%; 
    margin-bottom: 40px; 
} 

.footer-column { 
    flex: 0 0 45%; 
    margin-bottom: 50px; 
} 

Revised Demo