दिलचस्प पोस्ट
स्ट्रिंग इंटर्निंग क्या है? कोर डेटा – संग्रहीत छवियां (आईफोन) JQuery के साथ फ़ाइल अपलोड प्रगति बार ग्रिड वस्तुओं के विस्तार से सामग्री को रोकें 'एनजी-फोर्फ़' के लिए बाध्य नहीं किया जा सकता क्योंकि यह ज्ञात देशी संपत्ति नहीं है एरे को ऑब्जेक्ट में कनवर्ट करें क्या मैं सिंगल-उद्धरण के साथ सिंगल-कोट और आसपास के उपयोगकर्ता इनपुट से बचकर एसक्यूएल इंजेक्शन से बचा सकता हूं? एक सरणी में प्रत्येक आइटम की जावा गणना घटना पायथन डेटटाइम को पूर्णांक टाइमस्टैम्प कन्वर्ट करने के लिए कैसे करें उल्का के लिए एनजीएन कॉन्फ़िगरेशन की सिफारिश की गई चलने वाली JAR फ़ाइल का पथ कैसे प्राप्त करें? उद्देश्य-सी: आईडी और शून्य के बीच का अंतर * मैं DOM तत्व कैसे प्राप्त कर सकता हूं जिसमें मौजूदा चयन होता है? एक स्ट्रिंग में एक वर्ण की घटना की गणना कोणीय एनजी-बाइंड-एचटीएमएल और इसके भीतर निर्देश

फ़ायरफ़ॉक्स और क्रोम 48 में फ्लेक्सबॉक्स का इस्तेमाल करने वाली समस्याओं को प्रस्तुत करना

क्रोम 47 पर (सही व्यवहार): क्रोम 47 पर, उस .scroll साथ .scroll सही ढंग से स्क्रॉल कर रहा है, फ्लेक्स का उपयोग करके ऊंचाई 100% ले रहा है।

फ़ायरफ़ॉक्स पर (गलत व्यवहार): फ़ायरफ़ॉक्स पर, उस div के साथ .scroll सामग्री ऊंचाई का उपयोग कर रहा है और ठीक से स्क्रॉल नहीं कर रहा है।

इस समस्या का क्रॉस-ब्राउज़र समाधान क्या है?

http://jsfiddle.net/d4nkevee/

 for (var i = 0; i < 100; i++) $(".scroll").append("Dynamic content<br>"); 
 body, html { margin: 0; padding: 0; } .container { box-sizing: border-box; position: absolute; height: 100%; width: 100%; display: flex; flex-direction: column; } .content { background: yellow; flex: 1; display: flex; flex-direction: column; } .scroll { flex: 1 1 auto; overflow: scroll; } 
 <div class="container"> <div class="bar">Small</div> <div class="content"> <div>Static content</div> <div class="scroll"></div> <div>Static content</div> </div> <div class="footer">Small</div> </div> 


प्रश्न क्रोम 47 और क्रोम 48 के बीच अंतर करने के लिए अद्यतन

वेब के समाधान से एकत्रित समाधान "फ़ायरफ़ॉक्स और क्रोम 48 में फ्लेक्सबॉक्स का इस्तेमाल करने वाली समस्याओं को प्रस्तुत करना"

फ्लेक्सबॉक्स विनिर्देशन को सामग्री के आकार के बराबर फ्लेक्स आइटम के डिफ़ॉल्ट न्यूनतम आकार बनाने के लिए अद्यतन किया गया था: min-width: auto / min-height: auto

आप इस सेटिंग को min-width: 0 साथ ओवरराइड कर सकते हैं min-width: 0 / min-height: 0 :

 .content { background: yellow; flex: 1; display: flex; flex-direction: column; min-height: 0; /* NEW */ min-width: 0; /* NEW */ } 

http://jsfiddle.net/d4nkevee/1/

बग रिपोर्ट: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

यहां से कुछ विवरण दिए गए हैं:

4.5। फ्लेक्स आइटम का न्यूनतम आकार

फ्लेक्स मदों के लिए अधिक उचित डिफ़ॉल्ट न्यूनतम आकार प्रदान करने के लिए, यह विनिर्देशन सीएसएस 2.1 में परिभाषित min-width और min-height गुणों के आरंभिक मान के रूप में एक नया auto वैल्यू पेश करता है। ( अधिक पढ़ें )


अद्यतन करें

ऐसा प्रतीत होता है कि क्रो ने अपने प्रतिपादन व्यवहार को अपडेट कर दिया है। क्रोम 48 अब न्यूनतम फ्लेक्स आकार के रूप में फ़ायरफ़ॉक्स emulates

निम्न लिंक्स की रिपोर्ट के आधार पर, ऊपर दिए गए समाधान को क्रोम 48 में भी काम करना चाहिए।

  • संभावित क्रोम 48 फ्लेक्सबॉक्स बग जिससे लेआउट मुद्दे हैं। # 6841
  • अंक 580196: नेस्टेड फ्लेक्स-दिशा: स्तंभ 'तत्व ठीक से हटना नहीं है