Gli elementi flessibili non si impilano correttamente in Safari

Question

Ho creato un layout flessibile in cui quattro colonne/scatole si trovano affiancate all'interno di un div principale. Ho aggiunto una query multimediale a 980px che aumenta la larghezza delle colonne e aggiunge un flex-wrap per spingere le due colonne a destra su una nuova riga, creando un layout in stile 2 x 2. Funziona in tutti i browser ad eccezione di Safari, in cui i risultati sono molto imprevedibili.

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

Se si visualizza questo in Chrome e trascina la finestra qui sotto 980px, funzionerà nel modo che ho descritto sopra. In Safari tuttavia, anche se non sono riuscito a ricreare esattamente il problema, le scatole si sovrappongono invece verticalmente.

Come ho già detto, i risultati sono imprevedibili - quando implementato sul mio sito Web, il layout è in realtà più vicino al lavoro che nel Fiddle che ho creato. Sul sito web, il layout 2 x 2 funziona, ma solo se la quarta casella non contiene testo/widget al suo interno. Una volta che contiene il contenuto che raggiunge l'intera larghezza della scatola, si sposta verso il basso a sinistra e si trova sotto la terza scatola, come è successo a qualsiasi altra casella che ho provato ad aggiungere dopo di essa.

Se qualcuno ha già riscontrato questo bug e sa come risolverlo, sarei davvero grato. Ho passato tutto il giorno a cercare di sistemarlo e ho perso completamente le idee.

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

provare a sostituire il min-width e max-width dichiarazioni che hai con i loro equivalenti flex.

Invece di questo:

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

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

Prova questa:

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

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

Revised Demo