फ़ायरफ़ॉक्स फ्लेक्स आइटम (फ्लेक्सबॉक्स के बच्चे) पर ऊर्ध्वाधर मार्जिन को अनदेखा करता है जब तक कंटेनर

Question

पर स्पष्ट ऊंचाई घोषित नहीं की जाती है। मेरे पास प्रतिशत आधारित मार्जिन का उपयोग करके फ्लेक्सबॉक्स के साथ बनाई गई एक संवेदनशील प्रतिशत आधारित ग्रिड है। यह क्रोम और सफारी में ठीक खेलता है। हालांकि फ़ायरफ़ॉक्स मार्जिन को तब तक ध्वस्त कर देता है जब तक कि तत्वों पर एक स्पष्ट ऊंचाई निर्धारित न हो। किसी को भी कामकाज पता है?

Answer 1

यह bug in Firefox/Gecko के रूप में पहले बताया गया है, लेकिन यह वास्तव में bug in Chrome/Blink है।

ब्लॉक (display:block) तत्व के बच्चे पर, प्रतिशत मार्जिन & पैडिंग ब्लॉक की चौड़ाई के खिलाफ हल हो जाएगा। संभव है कि आप जिस व्यवहार की अपेक्षा कर रहे हैं, और ब्लिंक गलत है ऊपर दिए गए बग पेज में वर्णित फ्लेक्स कंटेनर के बच्चों के लिए है।

लेकिन, एक फ्लेक्स कंटेनर में, प्रतिशत मार्जिन & गद्दी supposed to resolve against the respective dimension हैं (ताकि, उदा मार्जिन टॉप/margin-bottom कंटेनर की ऊंचाई के खिलाफ का समाधान हो जाएगा)।

इसके अलावा, कंटेनर एक निश्चित ऊंचाई नहीं है, तो (उदाहरण के लिए यह height:auto है) तो प्रतिशत हल नहीं किया जा सकता है, तो वे 0.

Answer 2

को हल आप प्रतिशत में मार्जिन चौड़ाई दे सकते हैं और वीडब्ल्यू इकाइयों में मार्जिन ऊंचाई। यह केवल तभी काम करता है जब फ्लेक्सबॉक्स रैपर को निश्चित चौड़ाई नहीं दी जाती है।

उदाहरण के लिए: http://codepen.io/anon/pen/JKGjdB