एक फ्लेक्स आइटम को अपनी सामग्री से छोटे से कम करने से कैसे रोकें?

Question

मैं इस समस्या यहां प्रदर्शित करने के लिए एक jsfiddle सेट कर लेते हैं:
http://jsfiddle.net/x0eo3aeo/2/

HTML:

<div class="flexContainer"> 
    <div class="flexCol1">aaa</div> 
    <div class="flexCol2"><div style="width:100px; background-color:yellow;">bbb</div></div> 
    <div class="flexCol3"><div style="width:250px; background-color:pink;">Hello world, some long text here to make this element stay at 250px while splitting onto multiple lines.</div></div> 
</div> 

सीएसएस:

.flexContainer { 
    display: flex; 
    width: 100%; 
    flex-direction: row; 
} 
.flexCol1, .flexCol3 { 
    flex: 1; 
    background-color: green; 
} 

फ़ायरफ़ॉक्स वास्तव में वास्तव में मैं कैसे चाहते व्यवहार करता है। कॉलम 1 और 3 फ्लेक्स समान रूप से कॉलम 3 की चौड़ाई अपने बच्चे div के निश्चित आकार को हिट करती है, और उसके बाद केवल कॉलम 1 फ्लेक्स किया जाता है। हालांकि, क्रोम में, दोनों कॉलम समान रूप से फ्लेक्स करना जारी रखते हैं और कॉलम 3 की बाल सामग्री ओवरफ्लो होती है।

क्या क्रॉस-ब्राउज़र तरीके से फ़ायरफ़ॉक्स-शैली व्यवहार प्राप्त करने का कोई तरीका है?

Answer 1

min-width: -webkit-min-content;.flexCol3 जोड़कर आप क्रोम में फ़ायरफ़ॉक्स व्यवहार प्राप्त करने में सक्षम होना चाहिए। यह इसे अपनी न्यूनतम सामग्री चौड़ाई के नीचे घटने से रोकता है। (यह वही है अभी तक कि hasn't been implemented in Chromemin-width:auto flexbox कल्पना में शुरू की वजह से, डिफ़ॉल्ट रूप से होने की अपेक्षा की जाती है, लेकिन है।)

के रूप में नीचे टिप्पणी में बताया गया है, आईई एक min-content चौड़ाई कीवर्ड लागू करनी है, तो आप नहीं लगता है वहां कुछ हैकर करना पड़ सकता है (जैसे min-width: 250px)। सौभाग्य से, आईई की अगली रिलीज (12?) में min-width:auto लागू है, इसलिए यह सिर्फ फ़ायरफ़ॉक्स की तरह काम करना चाहिए, मुझे बताया गया है।