ब्राउज़र आकार पर बाल तत्वों से छोटे फ्लेक्सबॉक्स माता-पिता

Question

माता-पिता संकीर्ण स्क्रीन पर बच्चों की तुलना में छोटे क्यों हैं?

स्निपेट देखें ... फिर गुलाबी बॉक्स से छोटे होने के लिए अपने ब्राउज़र (चौड़ाईवार) का आकार बदलें। स्क्रॉल बार दिखाना चाहिए। पृष्ठ पर दाईं ओर स्क्रॉल करें और ध्यान दें कि हरी पृष्ठभूमि गुलाबी क्षेत्र से छोटी है और दाईं ओर एक सफेद स्थान है।

तो कुछ सवाल:

1. यह क्यों होता है?

2. मैं गुलाबी बॉक्स/div की तुलना में छोटे हो रही है जब ब्राउज़र आकार दिया जाता है बिना (या कहीं और) माता-पिता पर एक स्पष्ट चौड़ाई की स्थापना या overflow:hidden का उपयोग करने से माता पिता div के हरे रंग की पृष्ठभूमि को कैसे रोकूं?

3. क्या इस समस्या का कोई फ्लेक्सबॉक्स समाधान है?

धन्यवाद,

थॉमस

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 

 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

Answer 1

1. यह क्योंकि आपके .parent एक सामान्य ब्लॉक तत्व (है फ्लेक्स भी एक ब्लॉक स्तर कंटेनर है, होता है) और यहके साथ शुरू किया गया है 210, जो आपके मामले में व्यूपोर्ट की चौड़ाई है। तो दाईं ओर स्क्रॉल करने से सफेद स्थान दिखाई देगा क्योंकि आपकी div की चौड़ाई पूरे स्क्रोल करने योग्य क्षेत्र से छोटी है।

2. आप .parent को इनलाइन तत्व में सेट करने के साथ ऐसा करते हैं, जो इसके बच्चों की चौड़ाई का जवाब देगा।

3. हां, .parent पर display: inline-flex; का उपयोग करें।

.parent { 
 
    height: 400px; 
 
    width: 100%; 
 
    background-color: green; 
 
    display: inline-flex; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

w3schools पर display property देखें।

Answer 2

डिफ़ॉल्ट रूप से फ्लेक्स आइटम, उनकी सामग्री के आकार से छोटे नहीं हो सकते हैं। इसलिए, जब माता-पिता कम हो सकते हैं, तो फ्लेक्स आइटम टेक्स्ट की लंबाई से कम नहीं हो सकते हैं। इससे ओवरफ्लो और परिणामस्वरूप, नीचे सफेद स्थान का स्तंभ होता है।

फ्लेक्स आइटमों की प्रारंभिक सेटिंग min-width: auto है। प्रत्येक आइटम को कंटेनर में रहने के लिए, min-width: 0 पर स्विच करें।

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
    min-width: 0; /* NEW */ 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

अब गुलाबी बॉक्स कंटेनर अब और बह निकला नहीं कर रहे हैं।

हालांकि, अब टेक्स्ट गुलाबी बक्से बह रहा है।

सवाल पाठ के लिए व्यवहार निर्दिष्ट नहीं है, लेकिन यहाँ एक संभव समाधान है:

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
    min-width: 0;   /* NEW */ 
 
    text-overflow: ellipsis; /* NEW */ 
 
    white-space: nowrap;  /* NEW */ 
 
    overflow: hidden;  /* NEW */  
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>