Flex öğeleri Safari'de düzgün şekilde istiflemiyor

Question

Dört sütun/kutunun bir ebeveyn div içinde yan yana oturduğu esnek bir düzen yaptım. 980px'de sütunların genişliğini artıran bir medya sorgusu ekledim ve iki sağdaki sütunu yeni bir satıra yerleştirmek için bir esnek sargı ekleyerek 2 x 2 stil düzeni oluşturdum. Bu, Safari dışındaki tüm tarayıcılarda çalışır; sonuçlarda sonuçlar çok belirsizdir.

Fiddle: Chrome'da bu görüntüleyebilir ve 980 piksel aşağıda pencereyi sürüklerseniz https://jsfiddle.net/gjy1t16p/6/

, bu ben yukarıda açıklanan şekilde çalışacaktır. Ancak, Safari'de, sorunu tam olarak yeniden oluşturmama rağmen, kutular yerine dikey olarak yığılır.

Bahsettiğim gibi, sonuçlar tahmin edilemez - web sitemde uygulandığında, düzen aslında yaptığım Fiddle'a göre çalışmaya daha yakın. Web sitesinde, 2 x 2 düzen çalışır, ancak sadece dördüncü kutu içinde metin/widget yoksa. Kutunun tam genişliğine ulaşan içerik içerdiğinde, soldan aşağı doğru hareket eder ve sonradan eklemeyi denediğim diğer kutulara olduğu gibi üçüncü kutunun altında oturur.

Herhangi biri bu hatayı daha önce deneyimlediyse ve nasıl çözeceğini bilseydim, gerçekten minnettar olurdum. Bütün günümü düzeltmeye çalışarak geçirdim ve tamamen fikirlerim tükendi.

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

onların esnek eşdeğerleriyle sahip min-width ve max-width beyanları değiştirmeyi deneyin. Bunun yerine

:

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

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

bu deneyin: Michael, her zaman olduğu :) Teşekkür çalıştı

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

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

Revised Demo