Safari'de CSS flexbox öğelerini örtüşüyor

Question

Safari'yi varsayılan bir esnek kapsayıcıda esnek öğeleri üst üste getirmemek için doğru CSS nedir?

Safari, çok sayıda içeriği olan öğeleri bükmek için çok fazla genişlikli görünüyor.

Safari: (Mac OS X 10.10.5 Yosemite üzerinde v8.0.8)

esnek ürün Chrome ve Firefox'ta ince gösterir.

Krom:

CSS:

main { 
    display: flex; 
    border: 3px solid silver; 
    } 
main >div { 
    background-color: plum; 
    margin: 10px; 
    } 

HTML:

koduyla 10

Fiddle:
http://jsfiddle.net/LL05grus/6

Answer 1

elemanı küçülmektedir. Daraltma öğesi üzerinde flex-shrink özelliğini 0 olarak ayarlamanız gerekir.

main >div:first-child { 
    -webkit-flex: 0; 
    flex-shrink: 0; 
} 

Answer 2

Ayrıca, esnek kutu yönünün iPad'deki sütun çakışan öğelere dönüştüğü benzer bir sorun da vardı. Sorun, alt öğeye uygulanan flex: 0 1 0; özelliğiyle ilgilidir. Taban değerini otomatik verin. flex: 0 1 auto;

.parent{ 
    display: flex; 
    flex-direction: column; 
} 
.parent .child{ 
    flex: 0 1 auto; 
}