Flex项目在Safari中没有正确堆叠[重复]

Question

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

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

如果您在 Chrome 中查看此内容并将窗口拖动到 980 像素以下，它将按照我上面描述的方式工作。然而，在 Safari 中，虽然我没有设法准确地重现问题，但这些盒子是垂直堆叠的。

正如我所提到的，结果是不可预测的——当在我的网站上实施时，布局实际上比我制作的 Fiddle 更接近工作。在网站上，2 x 2 布局有效，但前提是第四个框内没有文本/小部件。一旦它包含的内容达到框的整个宽度，它就会向下移动到左侧并位于第三个框的下方，就像我尝试在它之后添加的任何其他框一样。

如果有人以前遇到过这个错误并且知道如何解决它，我将非常感激。我花了一整天的时间试图修复它，但我完全没有想法。

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 声明替换为它们的 flex 等效项。

而不是这个：

.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