सफेद-अंतरिक्ष वाले दो 50% divs: एक फ्लेक्स कंटेनर के अंदर अब्रैप तत्व

Question

मैं एक पैरेंट div चाहता हूं जिसमें दो 50% चौड़ाई वाले बच्चे divs हैं जो सामग्री के साथ आकार बदलते हैं।

उनमें से एक h3white-space:nowrap; के साथ है और इससे div 50% से बढ़ने का कारण बनता है।

मैं div को min-width:0; का उपयोग करके 50% चौड़ाई पर लौटने के लिए मजबूर कर सकता हूं लेकिन अब h3 ओवरफ़्लो हो सकता है।

तो मुझे या तो बच्चे के divs पर एक अलग चौड़ाई या उनमें से एक के अंदर h3 से एक ओवरफ्लो मिलता है।

क्या white-space:nowrap; के अंदर तत्वों के साथ भी उन्हें 50% चौड़ाई बनाना संभव है? समस्या यहाँ से बाहर

की जांच: http://codepen.io/anon/pen/VjPwLm?editors=1100

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left { 
 
    background: rgba(10, 200, 250, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
} 
 
#right { 
 
    background: rgba(250, 200, 10, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    /*min-width:0;*/ 
 
    /* Turn this on to see the h3 overflow */ 
 
} 
 
h3 { 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"> 
 
    <h3>Very long title that does not entirelly fit into the div</h3> 
 
    </div> 
 
</div>

Answer 1

अगर मैं सही ढंग से समझ, तुम छोड़ दिया फ्लेक्स आइटम लंबे शीर्षक के रूप में के रूप में व्यापक होना चाहता हूँ।

उसके बाद, आप कर सकते हैं: दोनों फ्लेक्स वस्तुओं पर

• उपयोग min-width: 100% उन्हें के रूप में व्यापक बनाने के लिए उनके ग्रंथों के संयोजन के रूप में। फिर, वे समान रूप से व्यापक होंगे।

• लेकिन वे बहुत व्यापक हैं, क्योंकि पहले फ्लेक्स आइटम का पाठ शामिल है। इसे अनदेखा करने के लिए width: 0 का उपयोग करें।

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left, #right { 
 
    min-width: 100%; 
 
} 
 
#left { 
 
    background: rgba(10,200,250,0.5); 
 
    width: 0; 
 
} 
 
#right { 
 
    background: rgba(250,200,10,0.5); 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"><h3>Very long title that does not entirelly fit into the div</h3></div> 
 
</div>

Answer 2

अगर मैं मुद्दे को समझने के लिए ठीक से, आप 2 divs maintian करने के लिए इतना है कि वे एक 50% चौड़ाई चाहते हैं। पैरेंट div को 100% चौड़ाई रखने के लिए सेट करें और फिर # राइट और # बाएं मिनट-चौड़ाई निर्धारित करें: 50%; एच 3 में जोड़ें ताकि अतिप्रवाह छिपा हुआ हो।

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left { 
 
    background: rgba(10, 200, 250, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    min-width: 100%; 
 
} 
 
#right { 
 
    background: rgba(250, 200, 10, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    min-width: 100%; 
 
} 
 
h3 { 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"> 
 
    <h3>Very long title that does not entirelly fit into the div</h3> 
 
    </div> 
 
</div>