flexbox बाल तत्व में रैपिंग लाइनों को रोकने

Question

मैं फ्लेक्सबॉक्स तत्व की लाइन रैपिंग को कैसे रोकूं? क्या यह भी संभव है?

मैं निम्न मार्कअप वाला flexbox के साथ एक दो स्तंभ ग्रिड बनाने के प्रयास कर रहा हूँ:

<div class="flex-container"> 
    <div class="no-wrap">this should not wrap</div> 
    <div class="can-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam debitis consequuntur incidunt neque vel in blanditiis id optio distinctio culpa rem voluptatibus quas architecto ratione assumenda omnis laboriosam? Earum esse.</div> 
</div> 

.no-wrap तत्व केवल के रूप में व्यापक रूप में यह इस तरह के 'होने की जरूरत है' होना चाहिए कि पाठ के सभी के अंदर दूसरी लाइन में लपेटता नहीं है। .can-wrap तत्व शेष स्थान ले जाएगा, और यदि आवश्यक हो तो लपेटें। http://codepen.io/jshawl/pen/bknAc

मैं: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

यहाँ एक codepen है -

.flex-container{ 
    display:flex; 
} 

.no-wrap{ 
    flex-basis:initial; 
} 

मैंने सोचा था कि flex-basis:initial लपेटकर लाइनों से तत्व रोका जा सके:

मैं इस सीएसएस (prefrix मुक्त के साथ) का उपयोग कर रहा पता है कि मैं .no-wrap तत्व की चौड़ाई को ठीक कर सकता हूं, लेकिन मैं इसे लाइन रैपिंग को रोकने के लिए पर्याप्त व्यापक कैसे बना सकता हूं?

.no-wrap तत्व के लिए नाव बराबर होगा:

.no-wrap{ 
    display:block; 
    float:left; /* be as wide as need be! */ 
} 

Answer 1

संपत्ति आप देख रहे हैं फ्लेक्स-हटना, नहीं फ्लेक्स-आधार है।

.no-wrap{ 
    flex-shrink: 0; 
} 

नोट तथापि, कि IE10 इस संपत्ति समर्थन के रूप में सूचीबद्ध नहीं है (क्योंकि यह समय वे flexbox कार्यान्वयन जोड़ा में विनिर्देश में मौजूद नहीं था)। आप इसके बजाय फ्लेक्स संपत्ति का उपयोग कर सकते हैं।

.no-wrap{ 
    flex: 0 0 auto; 
}