Elementy gilz nie układają się prawidłowo w Safari

Question

Zrobiłem układ flex, w którym cztery kolumny/pudełka siedzą obok siebie w dziale rodzica. Dodałem zapytanie o media o rozmiarze 980px, które zwiększa szerokość kolumn i dodaje obcinanie fleksowe, aby przesunąć dwie kolumny po prawej stronie do nowego wiersza, tworząc układ w stylu 2 x 2. Działa to w każdej przeglądarce z wyjątkiem Safari, w której wyniki są bardzo nieprzewidywalne.

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

Jeśli widok w Chrome i przeciągnij okno poniżej 980px, to będzie działać w sposób opisany powyżej mam. Jednak w przeglądarce Safari, chociaż nie udało mi się dokładnie odtworzyć problemu, zamiast tego stosy są ułożone pionowo.

Jak już wspomniałem, wyniki są nieprzewidywalne - po zaimplementowaniu na mojej stronie układ jest bliższy pracy niż w skrzypcach, które zrobiłem. Na stronie działa układ 2 x 2, ale tylko wtedy, gdy w czwartym polu nie ma tekstu/widżetów. Gdy zawiera zawartość, która osiąga pełną szerokość pola, przesuwa się w dół w lewo i znajduje się pod trzecim polem, tak jak w innych polach, które próbowałem dodać po nim.

Jeśli ktoś wcześniej doświadczył tego błędu i wie, jak go rozwiązać, byłbym bardzo wdzięczny. Spędziłem cały dzień próbując to naprawić i jestem całkowicie bez pomysłów.

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

Spróbuj zastąpić deklaracje min-width i max-width masz z ich odpowiednikami Flex.

Zamiast tego:

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

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

Spróbuj tego:

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

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

Revised Demo