Элементы Flex не правильно укладываются в Safari

Я сделал гибкий макет, в котором четыре столбца/коробки сидят бок о бок внутри родительского div. Я добавил медиа-запрос на 980px, который увеличивает ширину столбцов и добавляет flex-wrap, чтобы подтолкнуть два правых столбца к новой строке, создав макет стиля 2 x 2. Это работает в каждом браузере, кроме Safari, в котором результаты очень непредсказуемы.

Fiddle: https://jsfiddle.net/gjy1t16p/6/

Если вы просмотрите это в Chrome и перетащите окно под 980px, оно будет работать так, как я описал выше. Однако в 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;
}

}

Ответы

Ответ 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;
}

Пересмотренная демонстрация