सफारी में सीएसएस फ्लेक्सबॉक्स आइटम ओवरलैपिंग

Question

सफारी को डिफ़ॉल्ट फ्लेक्स कंटेनर में फ्लेक्स आइटम्स को ओवरलैप न करने के लिए सही सीएसएस क्या है?

सफारी बहुत सारी सामग्री के साथ फ्लेक्स आइटमों के लिए बहुत अधिक चौड़ाई देने लगता है।

सफारी: (मैक ओएस एक्स 10.10.5 Yosemite पर v8.0.8)

फ्लेक्स आइटम क्रोम और फ़ायरफ़ॉक्स में ठीक प्रदर्शित करते हैं।

क्रोम:

सीएसएस:

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

HTML:

कोड के साथ 10

फिडल:
http://jsfiddle.net/LL05grus/6

Answer 1

तत्व सिकुड़ रही है। आपको घटते तत्व पर flex-shrink संपत्ति 0 पर सेट करने की आवश्यकता है।

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

Answer 2

मुझे भी ऐसा ही एक मुद्दा था जहां फ्लेक्स बॉक्स दिशा आईपैड पर कॉलम ओवरलैप किए गए आइटम में बदल गई। यह मुद्दा flex: 0 1 0; संपत्ति के साथ बाल तत्व पर लागू किया गया था। आधार मूल्य ऑटो दें। flex: 0 1 auto;

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