प्रतिपादन समस्याओं फ़ायरफ़ॉक्स और क्रोम 48

क्रोम 47 (सही व्यवहार) पर में flexbox का उपयोग कर: क्रोम 47 पर, .scroll साथ कि div सही ढंग से स्क्रॉल है, ऊंचाई लेने फ्लेक्स का उपयोग कर 100%।प्रतिपादन समस्याओं फ़ायरफ़ॉक्स और क्रोम 48

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

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

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.

स्रोत

2016-01-24 Richard

मानक व्यवहार Firefox के एक है। और नवीनतम क्रोमियम भी इस तरह व्यवहार करता है। – Oriol

यह कहने के लिए धन्यवाद! इसे ध्यान में रखते हुए एक डुप्लिकेट है, क्या मुझे यह प्रश्न हटा देना चाहिए[email protected] – Richard

डुप्लिकेट का मतलब है कि सवाल नए उत्तरों के लिए बंद है। खोज उद्देश्यों को रखने के लिए अभी भी अच्छा है, क्योंकि इसमें डुप्ली में मौजूद कीवर्ड नहीं हो सकते हैं। –

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

आप 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. Implied Minimum Size of Flex Items

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

अद्यतन

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

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

स्रोत

2016-01-24 23:29:03

मुझे पता था कि यह समुदाय मुझे इस अस्पष्ट बग को ठीक करने में मदद करेगा। आपका बहुत बहुत धन्यवाद। यह एक आकर्षण की तरह यहाँ काम किया! – Richard

@Michael_B जिज्ञासा से बाहर, इस तरह की बग खोजने के बारे में कोई कैसे जाता है? क्या आपने इसे इस सवाल से पहले देखा था? जब तक आपको कारण नहीं मिल जाता तब तक दस JSFiddles बनाएं? एक भाग्यशाली रिश्वत? –

@LeonAdler, यदि आप आवश्यक हैं तो पृष्ठों में दिए गए लिंक के बाद, यदि आवश्यक हो, तो विभिन्न खोजशब्दों का उपयोग करके Google में गहरी खोज करें, जब तक कि आप अपने गंतव्य पर समाप्त न हों (यदि यह भी मौजूद है)। एक मानव वेब क्रॉलर बनें ;-) –

प्रतिपादन समस्याओं फ़ायरफ़ॉक्स और क्रोम 48

उत्तर

संबंधित मुद्दे