html - Flexbox works in Internet explorer but does not in Chrome -

मैं क्या हासिल करना चाहूंगा:

  & lt; div id = "container" & gt ; & Lt; div वर्ग = "बॉक्स" & gt; 1 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 2 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 3 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 4 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 5 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 6 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 7 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 8 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 9 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 10 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 11 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 12 & lt; / div & gt; & Lt; div वर्ग = "बॉक्स" & gt; 13 & lt; / div & gt; & Lt; / div & gt;  

मुझे क्या करना है, यह है कि "बॉक्स" वर्गों की 'एक्स' राशि में फिट होता है और अधिक "बॉक्स" वर्गों को रखा जाता है जब "सामग्री" वर्ग को व्यापक बना देता है।

इंटरनेट एक्सप्लोरर (11) में आप देख सकते हैं कि "बॉक्स" वर्ग "सामग्री" वर्ग में फिट है और इसे फैलता है, लेकिन क्रोम में (41) "बॉक्स" वर्ग "सामग्री" वर्ग से ऊपर फ्लोट लगते हैं और "सामग्री" कक्षा चौड़ाई के बाहर। यह गुस्सा आ रहा है क्योंकि अगर मैं इसके आगे एक और "कंटेंट" क्लास को भुनाना चाहता हूँ, तो यह पहले एक ओवरलैप करेगा।

क्या कोई मुझे बताता है कि मैं क्या कर रहा हूं? यदि यह कोई फ्लेक्सबॉक्स बिना इसे पूरा करने के लिए कोई सुझाव है, तो क्रोम गड़बड़ है?

हल :

पहले मैं सुझाव दूंगा आप फ्लोट: बाएं; साथ डिस्प्ले: फ्लेक्स मिश्रण नहीं कर सकते। इसके बजाय डिस्प्ले: इनलाइन-फ्लेक्स; को निर्दिष्ट करने पर विचार करें।

उस ने कहा, मुझे डर है कि आपको थोड़ी गणना करने की ज़रूरत है, कंटेनर तत्व के अंदर के सभी बच्चों:

कोड का निम्नलिखित भाग jQuery की आवश्यकता है, और जब DOM तैयार हो जाने पर चलना चाहिए:

  // ---- -------------------------------------------------- ----------------------- // कंटेनर के अपेक्षाकृत सभी बच्चों में ऑफसेट सबसे बड़ा पता लगाएं -------------- -------------------------------------------------- ----------------- var maxOffsetRight = 0, वर्तमानऑफ़सेटराइट; $ ('# कंटेनर')। प्रत्येक (फ़ंक्शन () {currentOffsetRight = $ (this) .position ()। Left + $ (this)। OuterWidth (सत्य); यदि (वर्तमानऑफ़सेटराइट & gt; अधिकतम ऑस्टस्ट्रेट) {maxOffsetRight = वर्तमानऑफ़सेटराइट;}}); // कंटेनर var ऑफसेट लिफ्ट = $ ('# कंटेनर') की चौड़ाई सेट करें। स्थिति ()। Left; $ ('# कंटेनर')। सीएसएस ('चौड़ाई', अधिकतमऑफ़सेटराइट-ऑफसेट लेफ्ट); नोट: आप एक एल्गोरिथ्म के बारे में सोच सकते हैं जो आखिरी बच्चे के ऑफसेट दायरे के लिए दिखता है। यह ज्यादातर मामलों में काम करेगा, लेकिन यह विफल हो सकता है और साथ ही आप फ्लेक्स आइटम पर एक संपत्ति  order  सेट कर सकते हैं, उन्हें पुन: क्रमित कर सकते हैं। इसलिए डोम में अंतिम बच्चा सबसे महत्वपूर्ण अधिकार ऑफसेट है। अगर बच्चों को मनमानी चौड़ाई है, तो यह बिना क्रमबद्ध तत्वों के भी असफल हो सकता है। उदाहरण के लिए यदि अंतिम से पहले बच्चे, एक ही कॉलम में, अंतिम से बड़ा है।