Сгибать предметы, неправильно складывающиеся в Safari

Question

Я сделал гибкий макет, в котором четыре столбца / поля располагаются рядом в родительском элементе div. Я добавил медиазапрос с разрешением 980 пикселей, который увеличивает ширину столбцов и добавляет гибкую обертку для переноса двух правых столбцов в новую строку, создавая макет в стиле 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;
}

Пересмотренный Демо