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

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। फ्लेक्स आइटम का स्वचालित न्यूनतम आकार

फ्लेक्स आइटम के लिए अधिक उचित डिफ़ॉल्ट न्यूनतम आकार प्रदान करने के लिए, यह विनिर्देश सीएसएस 2.1 में परिभाषित गुणों और autoप्रारंभिक गुणों के रूप में एक नया मूल्य पेश करता है ।min-widthmin-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

Comments

मेरे पास एक <फ़ील्डसेट> पैरेंट टैग डोम में बहुत अधिक था जो एक ही समस्या का कारण बना। इसकी न्यूनतम-चौड़ाई को 0 पर सेट करना इसे निर्धारित करता है।

— Jan Swart

इसके बारे में कोई भी विचार: stackoverflow.com/a/36247448/8620333 .. मैंने पाया कि यह min-widthसभी विवरणों के बारे में निश्चित रूप से नहीं बल्कि इसके साथ है ।

— तैमनी अफिफ

लगता है कि Chrome ने सामग्री से छोटे को छोटा न करने के लिए v73 में व्यवहार को बदल दिया।

— maccam94

उसी के साथ काम ठीक किया min-height: 0;। मुझे पेड़ में कई उच्च तत्वों के लिए इसे स्थापित करने का प्रयास करना पड़ा।

— बेन व्हीलर

मुझे min-height: 0;इसे काम करने के लिए 10 स्थानों पर स्थापित करना था । धन्यवाद, धन्यवाद, महान टिप के लिए धन्यवाद!

— dave0688