CSS में न्यूनतम और अधिकतम चौड़ाई / ऊँचाई गुण

अहमद शदीद द्वारा " सीएसएस में न्यूनतम और अधिकतम चौड़ाई / ऊँचाई का अनुवाद"।

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

इस लेख में, हम खुद को चौड़ाई और ऊंचाई के लिए अधिकतम और न्यूनतम के सीएसएस गुणों से परिचित करेंगे, और उनमें से प्रत्येक और उनके उपयोग के मामलों पर एक विस्तृत नज़र भी रखेंगे।

चौड़ाई के गुण

मैं चौड़ाई से संबंधित गुणों के साथ चर्चा शुरू करना चाहूंगा। हमारे पास min-width और max-width, और उनमें से प्रत्येक कुछ स्थितियों में अत्यंत महत्वपूर्ण और उपयोगी है।

न्यूनतम चौड़ाई (न्यूनतम-चौड़ाई)

min-width संपत्ति का उद्देश्य तत्व की चौड़ाई को निर्दिष्ट मूल्य से कम होने से रोकना है। डिफ़ॉल्ट मान auto , जो 0 तक जा सकता है।

इसे प्रदर्शित करने के लिए, आइए एक मूल उदाहरण देखें:



पाठ के साथ एक बटन होता है, जिसका आकार एक से कई शब्दों में भिन्न हो सकता है। यह सुनिश्चित करने के लिए कि इस बटन में न्यूनतम स्वीकार्य चौड़ाई होगी, भले ही अंदर केवल एक शब्द हो, आपको min-width का उपयोग करना होगा। न्यूनतम चौड़ाई 100px पर सेट की गई थी, इसलिए भले ही बटन में बहुत कम सामग्री हो, जैसे कि केवल "डन" या सिर्फ एक आइकन, यह अभी भी ध्यान देने योग्य रहने के लिए पर्याप्त होगा। यह विशेष रूप से महत्वपूर्ण है जब आप विभिन्न भाषाओं में अनुवादित साइटों के साथ काम करते हैं।

ट्विटर पर अरबी भाषा के उदाहरण पर विचार करें:



ऊपर दिए गए उदाहरण में, बटन में "تم" शब्द है, जिसका अरबी में अर्थ है "खत्म"। छोटी सामग्री के कारण, बटन की चौड़ाई स्वयं बहुत छोटी हो गई, इसलिए मैंने min-width संपत्ति सेट करके न्यूनतम सेट किया, जिसे दाईं ओर ("बाद में" अनुभाग में) छवि में देखा जा सकता है।

न्यूनतम चौड़ाई और पैडिंग

हालांकि, min-width संपत्ति अपनी सामग्री के आकार को बढ़ाते हुए एक बटन की चौड़ाई में वृद्धि की अनुमति देती है, फिर भी इसकी सीमाओं से एक इंडेंट की गारंटी के लिए पक्षों पर padding सेट की जानी चाहिए। अंतर नीचे दिए गए आंकड़े में दिखाया गया है।

अधिकतम चौड़ाई (अधिकतम-चौड़ाई)

max-width संपत्ति तत्व को निर्दिष्ट मूल्य से परे विस्तार करने से रोकने के लिए डिज़ाइन की गई है। डिफ़ॉल्ट मान none ।

अधिकतम-चौड़ाई का उपयोग करने का एक सामान्य और सरल उदाहरण है इसे छवियों पर लागू करना। नीचे दिए गए उदाहरण पर विचार करें:



यदि हम max-width: 100% लागू करते हैं max-width: 100% छवि के लिए max-width: 100% संपत्ति, यह मूल तत्व की सीमाओं के भीतर रहेगी, भले ही इसका मूल आकार बड़ा हो। यदि छवि शुरू में माता-पिता से छोटी है, तो यह संपत्ति किसी भी तरह से प्रभावित नहीं करेगी।

न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई का उपयोग करना

यदि दोनों गुण एक तत्व पर लागू होते हैं, तो कौन सा दूसरे के मूल्य को ओवरराइड करेगा? दूसरे शब्दों में, किस संपत्ति में उच्च प्राथमिकता है?

यदि min-width मान max-width से अधिक है, तो इसे तत्व की चौड़ाई के रूप में लिया जाएगा। निम्नलिखित उदाहरण पर विचार करें:

एचटीएमएल

 <div class="wrapper"> <div class="sub"></div> </div> 

सीएसएस

 .sub { width: 100px; min-width: 50%; max-width: 100%; } 

प्रारंभिक width मान 100px है और इसके अलावा, min-width और max-width गुण सेट हैं। नतीजतन, इस तत्व की चौड़ाई मूल ब्लॉक की चौड़ाई के 50% से अधिक नहीं होगी

ऊँचाई के गुण

न्यूनतम और अधिकतम चौड़ाई गुणों के अलावा, ऊँचाई के लिए समान गुण हैं

न्यूनतम ऊंचाई (न्यूनतम ऊंचाई)

min-height तत्व को निर्दिष्ट मूल्य से नीचे गिरने से रोकने के लिए डिज़ाइन की गई है। डिफ़ॉल्ट मान auto , जो 0 तक जा सकता है।

इसे प्रदर्शित करने के लिए, आइए एक साधारण उदाहरण देखें।

हमारे पास पाठ सामग्री के साथ एक अनुभाग है। यह आवश्यक है कि यह बड़ी और छोटी मात्रा में पाठ दोनों के साथ सुंदर दिखे



सीएसएस

 .sub { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 100px; color: #fff; background: #3c78dB; } 

न्यूनतम ऊंचाई 100px पर सेट है, और सामग्री फ्लेक्सबॉक्स का उपयोग क्षैतिज और लंबवत रूप से केंद्रित है। अधिक सामग्री होने पर क्या होता है? उदाहरण के लिए, एक पूरा पैराग्राफ होगा



हां, आपने पहले ही अनुमान लगा लिया था। अधिक सामग्री को समायोजित करने के लिए अनुभाग की ऊँचाई बढ़ेगी। इसके साथ, हम लचीले घटक बना सकते हैं जो सामग्री की मात्रा पर प्रतिक्रिया करते हैं।

अधिकतम ऊंचाई (अधिकतम ऊंचाई)

max-height को एक तत्व को एक निर्दिष्ट मूल्य से परे इसकी ऊंचाई बढ़ाने से रोकने के लिए डिज़ाइन किया गया है। डिफ़ॉल्ट मान none ।

निम्नलिखित उदाहरण में, मैंने सामग्री के लिए max-height निर्धारित की है। लेकिन चूंकि यह निर्दिष्ट क्षेत्र से बड़ा है, इसलिए अतिप्रवाह होता है और पाठ मूल तत्व की सीमाओं से परे जाता है

संपत्ति के उपयोग के उदाहरण

min-width , min-height , max-width और max-height गुणों के लिए कुछ सामान्य और दुर्लभ उपयोग के मामलों पर विचार करें।

टैग सूची

टैग की सूची में प्रत्येक टैग की न्यूनतम चौड़ाई को इंगित करने की सिफारिश की जाती है ताकि छोटी सामग्री के मामले में उनकी उपस्थिति न हो।



इस तरह के लचीलेपन के साथ, एक टैग अच्छा लगेगा चाहे उसकी सामग्री कितनी भी छोटी क्यों न हो। लेकिन क्या होता है अगर लेखक एक बहुत बड़ा टैग नाम सेट करता है, और सीएमएस (सामग्री प्रबंधन प्रणाली) का उपयोग करता है, उसके पास टैग में वर्णों की संख्या की कोई सीमा नहीं है? इस स्थिति में, आप max-width उपयोग भी कर सकते हैं

सीएसएस

 .c-tag { display: inline-block; min-width: 100px; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*Other styles*/ } 

max-width का उपयोग करके max-width आप अधिकतम चौड़ाई को एक विशिष्ट मान तक सीमित कर सकते हैं। हालांकि, इस संपत्ति को अकेले लागू करना पर्याप्त नहीं है। अधिकतम चौड़ाई से अधिक की सामग्री को छोटा किया जाना चाहिए।

https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

बटन

बटन के लिए न्यूनतम और अधिकतम गुणों का उपयोग करने के लिए अलग-अलग परिदृश्य हैं, क्योंकि बटन के घटकों के लिए भी कई विकल्प हैं। निम्नलिखित लेआउट पर विचार करें:



कृपया ध्यान दें कि "गेट" बटन की चौड़ाई बहुत छोटी है। यदि किसी कारण से बटन में अभी भी टेक्स्ट नहीं है (लेकिन केवल एक आइकन है), तो सब कुछ और भी खराब हो सकता है। इस मामले में, न्यूनतम चौड़ाई निर्धारित करना बहुत महत्वपूर्ण है

फ्लेक्सबॉक्स के लिए न्यूनतम चौड़ाई शून्य करना

min-width संपत्ति का डिफ़ॉल्ट मूल्य ऑटो है, जो शून्य का मूल्यांकन करता है। जब कोई आइटम एक फ्लेक्स आइटम होता है, तो min-width का मान शून्य नहीं होता है। एक फ्लेक्स तत्व का न्यूनतम आकार इसकी सामग्री का आकार है।

CSSWG के अनुसार:
डिफ़ॉल्ट रूप से, फ्लेक्स आइटम उनकी सामग्री (एक निश्चित आकार के साथ सबसे लंबे शब्द या आइटम की लंबाई) द्वारा आवश्यक न्यूनतम आकार से छोटे नहीं होते हैं। इसे बदलने के लिए, min-width या min-height सेट करें।

निम्नलिखित उदाहरण पर विचार करें:



उपयोगकर्ता नाम में एक बहुत लंबा शब्द है जो अतिप्रवाह और क्षैतिज स्क्रॉलिंग का कारण बनता है। हालाँकि मैंने कंटेंट को कम करने के लिए सीएसएस को नीचे जोड़ा:

सीएसएस

 .c-person__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

चूंकि हेडर एक फ्लेक्स एलिमेंट है, इसलिए इसका उपाय यह है कि मिनिमम-चौड़ाई मान रीसेट करें और इसे शून्य करें

सीएसएस

 .c-person__name { /*Other styles*/ min-width: 0; } 

यहाँ यह तय करने के बाद कैसा दिखना चाहिए:



यह CSSWG विवरण से पता चलता है कि overflow संपत्ति को visible अलावा किसी अन्य मान पर सेट करने से न्यूनतम-चौड़ाई मान शून्य के रूप में परिकलित हो सकता है, जो हमारी समस्या को स्पष्ट रूप से min-width: 0 निर्धारित किए बिना भी हल करता है min-width: 0 ।

फ्लेक्सबॉक्स के लिए शून्य न्यूनतम ऊँचाई

हालांकि यह न्यूनतम चौड़ाई की तुलना में कम आम समस्या है, फिर भी यह हो सकता है। समस्या फ्लेक्स आइटम के साथ है जो उनकी सामग्री से कम नहीं हो सकती है। नतीजतन, min-height मूल्य सामग्री के आकार के बराबर सेट है।

निम्नलिखित उदाहरण पर विचार करें:



कंटेनर की सीमाओं द्वारा लाल रंग में पाठ को छंटनी चाहिए। लेकिन चूंकि यह तत्व एक फ्लेक्स तत्व है, इसलिए इसकी min-height सामग्री की ऊंचाई के बराबर है। इसे रोकने के लिए, हमें न्यूनतम ऊंचाई मान रीसेट करना होगा। आइए HTML और CSS कोड देखें:

एचटीएमएल

 <div class="c-panel"> <h2 class="c-panel__title"><!-- Title --></h2> <div class="c-panel__body"> <div class="c-panel__content"><!-- Content --></div> </div> </div> 

सीएसएस

 .c-panel { display: flex; flex-direction: column; height: 180px; } .c-panel__body { min-height: 0; } .c-panel__content { overflow-y: scroll; height: 100%; } 

min-height: 0 जोड़ना min-height: 0 तत्व संपत्ति मूल्य को रीसेट कर देगा और यह अपेक्षित रूप से काम करना शुरू कर देगा
डेमो

एक ही समय में न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई का उपयोग करना

कभी-कभी ऐसी परिस्थितियां होती हैं जब हमारे पास न्यूनतम चौड़ाई वाला एक तत्व होता है, लेकिन एक ही समय में, अधिकतम चौड़ाई निर्दिष्ट नहीं होती है। इससे तत्व बहुत चौड़ा हो सकता है, हालांकि यह व्यवहार अभीष्ट नहीं था। निम्नलिखित उदाहरण पर विचार करें:



चूंकि चौड़ाई पिक्सेल में परिभाषित की गई है, इसलिए कोई निश्चितता नहीं है कि ऊपर मोबाइल के लिए काम करेगा। इस समस्या को हल करने के लिए, हम न्यूनतम और अधिकतम गुणों के लिए पिक्सेल के बजाय प्रतिशत का उपयोग कर सकते हैं। नीचे दिए गए उदाहरण पर विचार करें:

मैंने छवियों के लिए निम्नलिखित सीएसएस जोड़ा:

सीएसएस

 img { min-width: 35%; max-width: 70%; } 

पेज कंटेनर

max-width संपत्ति का उपयोग करने के लिए सबसे उपयोगी परिदृश्यों में से एक पृष्ठ (या कंटेनर) को लपेटना है। पृष्ठ को अधिकतम चौड़ाई पर सेट करके, हम यह सुनिश्चित कर सकते हैं कि सामग्री को देखने और पढ़ने के लिए उपयोगकर्ताओं के लिए सुविधाजनक होगा



नीचे बाईं और दाईं ओर padding वाले एक केंद्रित आवरण का एक उदाहरण है

सीएसएस

 .wrapper { max-width: 1170px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; } 

अधिकतम चौड़ाई और माप की इकाई "ch"

माप ch की इकाई वर्तमान तत्व के फ़ॉन्ट में प्रयुक्त वर्ण 0 (शून्य) की चौड़ाई के बराबर है। अधिकतम-चौड़ाई की संपत्ति में इसका उपयोग करके, हम एक स्ट्रिंग में वर्णों की संख्या को समायोजित कर सकते हैं। स्मैशिंग मैगज़ीन के इस लेख के अनुसार, अनुशंसित रेखा की लंबाई 45 से 75 अक्षरों तक है।

एक आवरण तत्व के साथ पिछले उदाहरण में, हम इस प्रतीक के उपयोग से लाभ उठा सकते हैं, क्योंकि यह एक लेख तत्व है

सीएसएस

 .wrapper { max-width: 70ch; /* Other styles */ } 

एक अज्ञात ऊंचाई के साथ एक तत्व चेतन

कभी-कभी हमें एक अज्ञात सामग्री ऊंचाई के साथ एक समझौते या एक मोबाइल मेनू को एनिमेट करने की समस्या का सामना करना पड़ता है। इस मामले में, max-height का उपयोग करना एक अच्छा समाधान हो सकता है।

निम्नलिखित उदाहरण पर विचार करें:



जब मेनू बटन दबाया जाता है, तो मेनू को आसानी से ऊपर से नीचे तक दिखाई देना चाहिए। यह जावास्क्रिप्ट के बिना करना असंभव है, जब तक कि तत्व की एक निश्चित ऊंचाई नहीं है (और यह अनुशंसित नहीं है)। हालांकि, यह अधिकतम ऊंचाई के साथ संभव है। तत्व में बहुत ऊँचाई जोड़ने का विचार है, उदाहरण के लिए, max-height: 20rem , जो नहीं पहुँचा जा max-height: 20rem , जिसके बाद हम max-height: 0 से max-height: 20rem तक एनीमेशन चरणों को सेट कर सकते हैं max-height: 20rem

सीएसएस

 .c-nav { max-height: 0; overflow: hidden; transition: 0.3s linear; } .c-nav.is-active { max-height: 22rem; } 

ऐक्शन में एनिमेशन देखने के लिए हैमबर्गर पर क्लिक करें

शीर्ष खंड (नायक) के लिए न्यूनतम ऊंचाई

जैसा कि आप देख सकते हैं, मुझे तत्वों को एक निश्चित ऊंचाई देना पसंद नहीं है। मुझे लगता है कि ऐसा करने में मैं इस अवधारणा के खिलाफ जाता हूं कि वेब पर घटक लचीले होने चाहिए। साइट के पहले खंड ("हीरो" अनुभाग) के लिए एक न्यूनतम ऊंचाई जोड़ना उन स्थितियों में उपयोगी है जहां बहुत बड़ी सामग्री जोड़ी जाती है (ऐसा होता है)।

निम्नलिखित उदाहरण पर विचार करें, जहां हमारे पास एक निश्चित ऊंचाई के साथ "नायक" अनुभाग है। यह अच्छा लग रहा है।



हालांकि, जब सामग्री बढ़ती है, तो यह कंटेनर को ओवरफ्लो करता है और अनुभाग आवरण से परे जाता है। यह बुरा है।



पहले से इस समस्या से बचने के लिए, हम min-height बजाय min-height जोड़ सकते हैं। हम सिर्फ इतना ही करते हैं, कम से कम अपनी अंतरात्मा को साफ़ करने के लिए। भले ही यह एक अजीब पेज प्रदर्शन का कारण हो सकता है, मेरा मानना ​​है कि इस तरह की स्थितियों को सामग्री प्रबंधन प्रणाली (सीएमएस) में पहले स्थान पर रोका जाना चाहिए। उसके बाद, समस्या ठीक हो गई है और पृष्ठ अच्छा लग रहा है:



सामग्री के साथ अतिप्रवाह की समस्या केवल यह नहीं है कि यह माता-पिता की निर्धारित ऊंचाई से अधिक हो सकती है। यह स्क्रीन के आकार में कमी के परिणामस्वरूप हो सकता है और परिणामस्वरूप, स्वच्छता के कारण पाठ सामग्री की ऊंचाई में वृद्धि:



यदि आप एक निश्चित ऊँचाई निर्दिष्ट नहीं करते हैं, लेकिन केवल इसे min-height का उपयोग करके सीमित करते हैं, तो ऊपर वर्णित समस्या बिल्कुल नहीं होगी।

मोडल खिड़की

मोडल विंडो घटक के लिए, आपको न्यूनतम और अधिकतम चौड़ाई दोनों निर्दिष्ट करनी होगी, इसलिए, यह किसी भी आकार (मोबाइल से डेस्कटॉप तक) की स्क्रीन पर काम करेगा। यह सीएसएस-ट्रिक्स पर एक दिलचस्प लेख की याद दिलाता है, जो बताता है कि इस मामले में क्या करना है।

1 रास्ता

 .c-modal__body { width: 600px; max-width: 100%; } 

2 तरह से

 .c-modal__body { width: 100%; max-width: 600px; } 

मेरे लिए, मैं दूसरा तरीका पसंद करता हूं, क्योंकि मुझे केवल max-width: 600px को परिभाषित करने की आवश्यकता है max-width: 600px । एक मोडल विंडो एक div एलिमेंट है, इसलिए इसमें पहले से ही चौड़ाई = 100% पैरेंट सेट है, है ना?

नीचे दिए गए मोडल विंडो उदाहरण पर विचार करें। गौर करें कि व्यूपोर्ट में पर्याप्त खाली जगह न होने पर पैरेंट की चौड़ाई 100% कैसे हो जाती है

न्यूनतम ऊंचाई और चिपचिपा पाद

जब पृष्ठ की सामग्री पर्याप्त बड़ी नहीं होती है, तो पाद लेख को नीचे से चिपके रहने की उम्मीद नहीं होती है। आइए एक उदाहरण देखें जो इसे बेहतर प्रदर्शित करता है:



कृपया ध्यान दें कि पाद लेख ब्राउज़र विंडो के निचले किनारे पर नहीं चिपकता है। ऐसा इसलिए है क्योंकि सामग्री की ऊंचाई ब्राउज़र विंडो की ऊंचाई से कम है। इस समस्या को हल करने के बाद, पृष्ठ को इस तरह दिखना चाहिए:



सबसे पहले, मैंने शरीर तत्व को एक फ्लेक्स कंटेनर बनाया, और फिर इसे व्यूपोर्ट के 100% की न्यूनतम ऊंचाई पर सेट किया।

सीएसएस

 body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; } 

मैं चिपचिपा पाद लेख पर इस लेख को पढ़ने की सलाह देता हूं।
डेमो

आनुपातिक तत्व आकार और अधिकतम-चौड़ाई / ऊंचाई

व्यूपोर्ट के आकार के आधार पर एक आनुपातिक कंटेनर बनाने के लिए, एक हैकिंग को पैडिंग का उपयोग करके प्रस्तुत किया गया था। अब हम व्यूपोर्ट और अधिकतम चौड़ाई / ऊंचाई की इकाइयों को मिलाकर समान व्यवहार का अनुकरण कर सकते हैं।

मिरियम सुज़ैन के एक लेख की सामग्री के आधार पर, मैं यह बताना चाहता हूं कि यह कैसे काम करता है।



हमारे पास 644 x 1000 पिक्सेल के आयामों के साथ एक छवि है। हमें निम्नलिखित करने की आवश्यकता है:

• पहलू अनुपात: height / width (ऊंचाई चौड़ाई से विभाजित)
  
• कंटेनर चौड़ाई: स्थिर या गतिशील (100%) हो सकती है
  
• व्यूपोर्ट की चौड़ाई के 100% की height को पहलू अनुपात से गुणा करें
  
• कंटेनर की चौड़ाई समय पहलू अनुपात के बराबर max-height सेट करें
  
• कंटेनर की चौड़ाई के बराबर max-width सेट करें
  

सीएसएस

 img { --ratio: 664 / 1000; --container-width: 30em; display: block; height: calc(100vw * var(--ratio)); max-height: calc(var(--container-width) * var(--ratio)); width: 100%; max-width: var(--container-width); } 

100% की ऊंचाई के साथ HTML / बॉडी

क्या होगा यदि हम चाहते हैं कि शरीर तत्व व्यूपोर्ट की ऊंचाई के 100% पर कब्जा करे? यह वेब समुदाय में संपूर्ण और विशेष रूप से स्टैकऑवरफ्लो साइट पर एक सामान्य प्रश्न है।

सबसे पहले आपको height: 100% निर्धारित करने की आवश्यकता है height: 100% html तत्व को height: 100% । यह सुनिश्चित करेगा कि रूट तत्व 100% अधिक है। फिर body तत्व के लिए min-height जोड़ें। इसका कारण यह है कि min-height का उपयोग किया जाता है क्योंकि यह गुण body तत्व की ऊंचाई को गतिशील बनाने की अनुमति देता है, और समायोजित करता है कि सामग्री कितनी बड़ी है

सीएसएस

 html { height: 100%; } body { min-height: 100%; } 

डेमो

नोट

न्यूनतम चौड़ाई और ब्लॉक तत्व

कभी-कभी हम यह भूल जाते हैं कि जिस तत्व को हम min-width को लागू करने की कोशिश कर रहे हैं वह ब्लॉक है। अंत में, यह भ्रामक हो सकता है और तत्व को प्रभावित नहीं कर सकता है। सुनिश्चित करें कि आइटम अवरुद्ध नहीं है

सीएसएस तुलना कार्य

StackOverflow पर शोध करते समय डेवलपर्स को मुख्य समस्याओं का सामना करना पड़ता है, मुझे यह सवाल आया था जिसमें लेखक निम्नलिखित पूछता है:

क्या ऐसा कुछ करना संभव है? max-width: calc(max(500px, 100% - 80px)) या शायद यह max-width: max(500px, calc(100% - 80px)))

वांछित व्यवहार तत्व की चौड़ाई को 500px से अधिक नहीं रखना है। यदि तत्व को समायोजित करने के लिए गुंजाइश की चौड़ाई पर्याप्त नहीं है, तो चौड़ाई 100% – 80px होनी चाहिए।

सवाल के जवाब में प्रकाशित समाधान के लिए, मैंने इसे लागू करने की कोशिश की और यह क्रोम 79 और सफारी 13.0.3 में काम करता है। यद्यपि यह लेख के दायरे से परे है, फिर भी मैं यहां समाधान दूंगा:

सीएसएस

 .yourselector { max-width: calc(100% - 80px); } /* Update: I changed the max-width from 500px to 580px. Thanks @fvsch */ @media screen and (max-width: 580px) { .yourselector { max-width: 500px; } } 

आगे के अध्ययन के लिए स्रोत और सामग्री

• फ्लेक्स आइटम और मिन-चौड़ाई: 0 डोमिनिक मैकेफी द्वारा
• सीएसएस: डोमिनिक स्कोलर द्वारा फ्लेक्स और "न्यूनतम-चौड़ाई"
• फिलिप वाल्टन द्वारा फ्लेक्सबग्स