फ्लेक्स आइटम पिछले सामग्री आकार को क्यों नहीं सिकोड़ते हैं?

Question

मेरे पास 4 फ्लेक्सबॉक्स कॉलम हैं और सब कुछ ठीक काम करता है, लेकिन जब मैं कॉलम में कुछ पाठ जोड़ता हूं और इसे बड़े फ़ॉन्ट आकार में सेट करता हूं, तो यह फ्लेक्स प्रॉपर्टी के कारण कॉलम को व्यापक बना रहा है।

मैंने उपयोग करने की कोशिश की word-break: break-wordऔर इसने मदद की, लेकिन फिर भी जब मैं कॉलम को बहुत छोटी चौड़ाई का आकार देता हूं, तो टेक्स्ट में अक्षर कई लाइनों (एक अक्षर प्रति पंक्ति) में टूट जाते हैं, और फिर भी कॉलम को एक अक्षर आकार से छोटी चौड़ाई नहीं मिलती है ।

इस वीडियो को देखें (शुरुआत में, पहला कॉलम सबसे छोटा है, लेकिन जब मैंने विंडो को आकार दिया, तो यह सबसे चौड़ा कॉलम है। मैं हमेशा फ्लेक्स सेटिंग्स का सम्मान करना चाहता हूं; फ्लेक्स का आकार 1: 3: 4: 4)

मुझे पता है, फ़ॉन्ट-आकार और कॉलम पैडिंग को छोटे पर सेट करने से मदद मिलेगी ... लेकिन क्या कोई अन्य समाधान है?

मैं उपयोग नहीं कर सकता overflow-x: hidden।

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Answer 1

फ्लेक्स आइटम का स्वचालित न्यूनतम आकार

आप एक flexbox डिफ़ॉल्ट सेटिंग का सामना कर रहे हैं।

एक फ्लेक्स आइटम मुख्य अक्ष के साथ अपनी सामग्री के आकार से छोटा नहीं हो सकता है।

चूक हैं ...

• min-width: auto
• min-height: auto

... क्रमशः पंक्ति-दिशा और स्तंभ-दिशा में फ्लेक्स आइटम के लिए।

आप फ्लेक्स आइटम सेट करके इन डिफ़ॉल्ट को ओवरराइड कर सकते हैं:

• min-width: 0
• min-height: 0
• overflow: hidden(या किसी अन्य मूल्य को छोड़कर visible)

---

फ्लेक्सबॉक्स विशिष्टता

4.5। फ्लेक्स आइटम का स्वचालित न्यूनतम आकार

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

autoमूल्य के संबंध में ...

एक फ्लेक्स आइटम overflowपर visible, जो मुख्य अक्ष में होता है, जब फ्लेक्स आइटम की मुख्य-अक्ष न्यूनतम आकार की संपत्ति पर निर्दिष्ट होता है, तो एक स्वचालित न्यूनतम आकार निर्दिष्ट करता है । अन्यथा यह गणना करता है 0।

दूसरे शब्दों में:

• min-width: autoऔर min-height: autoचूक केवल लागू होते हैं जब overflowहै visible।
• यदि overflowमान नहीं है visible, तो न्यूनतम आकार की संपत्ति का मूल्य है 0।
• इसलिए, के overflow: hiddenलिए एक विकल्प हो सकता है min-width: 0और min-height: 0।

तथा...

• न्यूनतम आकार का एल्गोरिथ्म केवल मुख्य अक्ष पर लागू होता है।
• उदाहरण के लिए, पंक्ति-दिशा कंटेनर में एक फ्लेक्स आइटम min-height: autoडिफ़ॉल्ट रूप से नहीं मिलता है।
• अधिक विस्तृत विवरण के लिए यह पोस्ट देखें:
  • फ्लेक्स-दिशा में अलग-अलग तरीके से रेंडर करते हुए: चौड़ाई और फ्लेक्स-दिशा: कॉलम

---

आपने न्यूनतम-चौड़ाई लागू की है: 0 और आइटम अभी भी सिकुड़ता नहीं है?

नेस्टेड फ्लेक्स कंटेनर

यदि आप HTML संरचना के कई स्तरों पर फ्लेक्स आइटम के साथ काम कर रहे हैं, तो उच्च स्तर पर डिफ़ॉल्ट min-width: auto/ min-height: autoआइटम को ओवरराइड करना आवश्यक हो सकता है ।

मूल रूप से, एक उच्च स्तरीय फ्लेक्स आइटम के साथ min-width: autoनीचे घोंसले वाले आइटम पर सिकुड़ने से रोका जा सकता है min-width: 0।

उदाहरण:

• फ्लेक्स आइटम अपनी सामग्री से छोटा नहीं सिकुड़ रहा है
• माता-पिता में बच्चे को मारना
• व्हाइट-स्पेस css प्रॉपर्टी फ्लेक्स के साथ समस्याएँ पैदा कर रही है

---

ब्राउज़र रेंडरिंग नोट्स

• क्रोम बनाम फ़ायरफ़ॉक्स / एज

  कम से कम 2017 के बाद से, यह प्रतीत होता है कि क्रोम या तो (1) वापस min-width: 0/ min-height: 0डिफ़ॉल्ट पर वापस आ रहा है , या (2) स्वचालित रूप 0से एक रहस्य एल्गोरिथ्म के आधार पर कुछ स्थितियों में चूक को लागू कर रहा है। (यह वह हो सकता है जिसे वे एक हस्तक्षेप कहते हैं ।) परिणामस्वरूप, कई लोग अपने लेआउट (विशेष रूप से वांछित स्क्रॉलबार) को क्रोम में अपेक्षित के रूप में देख रहे हैं, लेकिन फ़ायरफ़ॉक्स / एज में नहीं। यह मुद्दा यहां और अधिक विस्तार से कवर किया गया है: फ़ायरफ़ॉक्स और क्रोम के बीच फ्लेक्स-हटना विसंगति

• IE11

  जैसा कि अनुमान लगाया गया है, गुणों और गुणों का autoमूल्य "नया" है। इसका मतलब यह है कि कुछ ब्राउज़र अभी भी डिफ़ॉल्ट रूप से एक मूल्य प्रदान कर सकते हैं , क्योंकि उन्होंने मूल्य अपडेट होने से पहले फ्लेक्स लेआउट को लागू किया था और क्योंकि सीएसएस 2.1 में और इसके लिए प्रारंभिक मूल्य है । ऐसा ही एक ब्राउज़र IE11 है। फ्लेक्सबॉक्स कल्पना में परिभाषित के रूप में अन्य ब्राउज़रों ने नए मूल्य के लिए अद्यतन किया है ।min-widthmin-height00min-widthmin-heightauto

---

संशोधित डेमो

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle

Answer 2

मुझे लग रहा है कि इसने मुझे फ्लेक्स और ग्रिड दोनों के लिए वर्षों से बार-बार काट लिया है, इसलिए मैं निम्नलिखित सुझाव देने जा रहा हूं:

* { min-width: 0; min-height: 0; }

और फिर बस उपयोग करें min-width: autoया min-height: autoयदि आपको उस व्यवहार की आवश्यकता है।

वास्तव में, बॉक्स-आकार में फेंकने के साथ-साथ सभी लेआउट को अधिक समझदार बनाने के लिए:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

क्या कोई जानता है कि क्या कोई विषम परिणाम हैं? मैंने उपरोक्त मिश्रण का उपयोग करने के कई वर्षों में कुछ भी सामना नहीं किया है। वास्तव में, मैं ऐसे किसी भी मामले के बारे में नहीं सोच सकता, जहां मैं सामग्री के लिए फ्लेक्स / ग्रिड से बाहर की ओर लेआउट करना चाहता हूं, बल्कि फ्लेक्स / ग्रिड की तुलना में सामग्री --- और निश्चित रूप से यदि वे मौजूद हैं, तो वे दुर्लभ हैं। तो यह एक खराब डिफ़ॉल्ट की तरह लगता है। लेकिन शायद मुझे कुछ याद आ रहा है?