फ़ायरफ़ॉक्स में नेस्टेड तत्वों के साथ फ्लेक्सबॉक्स ओवरफ़्लो-वाई समस्या

फ्लेक्सबॉक्स का उपयोग करते हुए एक सीएसएस लेआउट में, जहां नेस्टेड तत्व पैरेंट फ्लेक्सबॉक्स के भीतर समाहित होते हैं आइटम, ओवरफ्लो-वाई फ़ायरफ़ॉक्स में अपेक्षानुसार कार्य नहीं कर सकता है। यह समस्या विशेष रूप से तब उत्पन्न होती है जब नेस्टेड तत्व को ऑटो की ओवरफ्लो-वाई संपत्ति दी जाती है।

समस्या स्पष्टीकरण:

फ्लेक्सबॉक्स आइटम स्वचालित रूप से आंतरिक के आधार पर अपने न्यूनतम आकार की गणना करते हैं उनके बाल तत्वों का आकार. हालाँकि, जब ओवरफ़्लो गुणों वाले चाइल्ड तत्व लागू होते हैं, जैसे कि ओवरफ़्लो-वाई, तो फ्लेक्स आइटम चाइल्ड की सामग्री के बराबर न्यूनतम आकार बनाए रखेगा, भले ही वह उपलब्ध स्थान से अधिक हो।

समाधान :

फ़ायरफ़ॉक्स में इस समस्या को हल करने के लिए, मूल फ्लेक्स आइटम की न्यूनतम-ऊंचाई संपत्ति को स्पष्ट रूप से 0 पर सेट करना आवश्यक है। यह डिफ़ॉल्ट न्यूनतम आकार व्यवहार को अक्षम कर देता है और फ्लेक्स आइटम को सिकुड़ने की अनुमति देता है बच्चे के न्यूनतम-सामग्री आकार के नीचे।

.parent-flex-item {
  min-height: 0;
}

इस फिक्स को लागू करने से, ओवरफ्लो-वाई: ऑटो वाला नेस्टेड तत्व अब स्क्रॉलबार को सिकोड़ने और प्रदर्शित करने में सक्षम होगा जब इसकी सामग्री उपलब्ध ऊंचाई से अधिक हो जाएगी।

कोड उदाहरण :

निम्नलिखित HTML और CSS कोड पर विचार करें:

  

    
This is a long text that exceeds the available height.
  

.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}

इस कोड के साथ, नेस्टेड तत्व में फ़ायरफ़ॉक्स में एक स्क्रॉलबार होगा, जिससे उपयोगकर्ता ओवरफ्लो की गई सामग्री को देख सकेंगे।