दिलचस्प पोस्ट
गिट वर्जनिंग का उपयोग करते हुए फ़ाइल का परिवर्तन इतिहास देखें ऐप प्रतिनिधि से वर्तमान दृश्य नियंत्रक प्राप्त करें त्रुटि: JAVA_HOME को सही ढंग से निष्पादित करने वाले मेवेन परिभाषित नहीं किया गया है Backbone.js में एक दृश्य को नष्ट या हटाएं सीटीआईपी – शुरुआती "/ Usr / bin / ld: नहीं मिल सकता- lz" क्लोन () बनाम प्रतिलिपि कन्स्ट्रक्टर बनाम कारखाना विधि? सी का उपयोग कर URL को पार्स करने के सर्वोत्तम तरीके हैं? आईफोन एसडीके के साथ आईफोन के कॉल लॉग को एक्सेस करना पायथन में `स्वयं 'ऑब्जेक्ट क्यों हैं? स्विफ्ट 3 आईओएस – कैसे यूआईटीएपीजस्टाइनरेक्टर को ट्रिगर करें अजगर में अपवाद के बाद पुन: प्रयास कैसे करें? किसी यूआरएल के साथ प्रक्षेप में जोड़कर एंजेलरजेएस एकाधिक भाव Laravel: त्रुटि : PostgreSQL में ड्राइवर को नहीं खोजा जा सका बाल प्रक्रिया और मूल प्रक्रिया के वैरिएबल का पता समान क्यों है

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

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

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

इस वीडियो को देखने की कोशिश करें: http://screencast-o-matic.com/watch/cDetln1tyt (शुरू में, सबसे पहले कॉलम सबसे छोटी है, लेकिन जब मैं विंडो का आकार बदलता हूं, तो यह सबसे बड़ा स्तंभ है.मैं बस फ्लेक्स सेटिंग्स का सम्मान करना चाहता हूं हमेशा .. फ्लेक्स आकार 1: 3: 4: 4)

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

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

JSFiddle: https://jsfiddle.net/78h8wv4o/3/

 .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> 

Solutions Collecting From Web of "फ्लेक्स आइटम पिछले सामग्री आकार को छोटा क्यों नहीं करता?"

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

आप फ्लेक्स मदों के न्यूनतम आकार एल्गोरिदम के खिलाफ ऊपर उठा रहे हैं।

यह एक डिफ़ॉल्ट सेटिंग है जो एक फ्लेक्स वस्तु को अपनी सामग्री के आकार से पहले सिकुड़ने से बचाती है (अन्य फ्लेक्स कारकों की परवाह किए बिना, जैसे flex-shrink या flex-basis )

डिफ़ॉल्ट हैं …

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

… क्रमशः पंक्ति-दिशा और स्तंभ-दिशा में फ्लेक्स मदों के लिए।

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

  • min-width: 0
  • min-height: 0
  • overflow: hidden (या अन्य कोई भी मान, visible छोड़कर)

फ्लेक्सबॉक्स विनिर्देश

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

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

auto वैल्यू के संबंध में …

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

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

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

तथा…

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

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

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

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

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

उदाहरण:

  • फ्लेक्स आइटम इसकी सामग्री से छोटा छोटा नहीं है
  • माता-पिता में बच्चे को फिट करना

ब्राउज़र प्रतिपादन नोट्स

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

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

  • IE11

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


संशोधित डेमो

 .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>