दिलचस्प पोस्ट
कैसे एक PHP से curl को एक चर में कुकीज़ प्राप्त करने के लिए स्टोरीबोर्ड में टैब बार आइटम चयनित रंग बदलें एक WHERE करना .. सिद्धांत 2 में subquery में क्यों AngularJS में पदावनत की जगह है? एक्लिप्स में एंड्रॉइड प्रोजेक्ट का पैकेज नाम कैसे बदल सकता है? 'Jdbc: mysql: // localhost: 3306 / mysql के लिए कोई उपयुक्त ड्राइवर नहीं मिला स्टाइल सेटर में यूडब्ल्यूपी बाध्यकारी काम नहीं कर रहा है मुझे जावा में मानक ट्री आधारित मानचित्र कार्यान्वयन कहां मिल सकता है? डॉकर – कॉर्पोरेट नेटवर्क पर छवि निर्माण के दौरान नेटवर्क कॉल विफल 2.3 पर किया गया सॉफ़्टइनपुट एक्शन लेबल के साथ बहुरेखित संपादन टेक्स्ट मैं विस्तारित PHP वर्ग में एक स्थिर कॉल से क्लासनाम कैसे प्राप्त करूं? आईओएस 7 (4 इंच रेटिना डिस्प्ले) पर ऐप्पल चलते समय दिखाए जाने वाले ब्लैक बार $ लुकअप ऑपरेटर का इस्तेमाल करते हुए कई परिस्थितियों में शामिल हों $ की डिफरेड की एक सरणी में पास करें। जब () स्विफ्ट में सबस्क्रिप्ट और सुपरस्क्रिप्ट का उपयोग कैसे करें

फ़ायरफ़ॉक्स और क्रोम 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: नेस्टेड फ्लेक्स-दिशा: स्तंभ 'तत्व ठीक से हटना नहीं है