फ्लेक्स आइटम को अपने टेक्स्ट की चौड़ाई बनाएं

Question

मैं दो कॉलम के साथ एक लेआउट रखना चाहता हूं, जहां बाएं कॉलम किसी प्रकार की साइडबार है।

अब मैं साइडबार में कुछ पाठ का उपयोग करना चाहता हूं जो लपेटना नहीं चाहिए।

जब मैं ऐसा करता हूं तो यह किसी प्रकार का अतिप्रवाह होता है और फिर overflow:hidden का उपयोग टेक्स्ट का एक अच्छा हिस्सा छुपाता है।

overflow:hidden छोड़ दिए बिना शेष स्थान का उपयोग करने के लिए अनचाहे पाठ की चौड़ाई और दाएं कॉलम का उपयोग करने के लिए बाएं कॉलम को मैं कैसे संशोधित कर सकता हूं?

#container { 
 
    display: flex; 
 
} 
 
#sidebar { 
 
    border: 1px solid red; 
 
    flex 1 auto; 
 
    overflow: hidden; 
 
} 
 
#sidebar .column { 
 
    white-space: nowrap; 
 
} 
 
#sidebar .column span { 
 
    margin: 2px; 
 
    padding: 2px; 
 
    border: 1px solid green; 
 
    display: inline-block; 
 
} 
 
#content { 
 
    border: 1px solid black; 
 
    flex: 1 100%; 
 
}

<div id="container"> 
 
    <div id="sidebar"> 
 
     <div class="column"> 
 
      <span>Howdy Cowboy, some text is missing here</span> 
 
     </div> 
 
    </div> 
 
    <div id="content"> 
 
     Some funny content 
 
    </div> 
 
</div>

JSFIDDLE

Answer 1

मैं लपेटा न गया लेख और दाएँ स्तंभ overflow:hidden छोड़ने के बिना शेष अंतरिक्ष का उपयोग करने की चौड़ाई का उपयोग करने के बाएँ स्तंभ को कैसे संशोधित कर सकते हैं?

बाएं कॉलम को अपनी सामग्री के रूप में केवल इतना ही बताया जाए।

बजाय इस की:

#sidebar { 
    flex 1 auto;   /* 1 */ 
    overflow: hidden; 
    border: 1px solid red; 
} 

इस का उपयोग करें:

#sidebar { 
    flex: 0 1 auto;  /* 1 */ 
    overflow: hidden; 
    border: 1px solid red; 
} 

और किसी भी शेष अंतरिक्ष का उपभोग करने के अधिकार स्तम्भ बताओ।

इसके बजाय इस बात का

:

#content { 
    flex: 1 100%;   /* 2 */ 
    border: 1px solid black; 
} 

उपयोग करें:

#content { 
    flex: 1;    /* 2 */ 
    border: 1px solid black; 
} 

revised fiddle

नोट्स:

1. flex: 1 autoके लिए आशुलिपि है(परिभाषित), flex-shrink: 1 (डिफ़ॉल्ट रूप से) और flex-basis: auto (परिभाषित)। flex-grow: 0 पर स्विच करें क्योंकि आप नहीं चाहते कि बॉक्स सामग्री से परे विस्तार करे।

   संयोग से, flex-grow: 0, flex-shrink: 1 और flex-basis: auto सभी default values हैं। इसलिए, आप flex नियम को छोड़ सकते हैं और एक ही परिणाम प्राप्त कर सकते हैं।

   ध्यान दें कि आपका कोड किसी भी मामले में काम नहीं करेगा क्योंकि आपके पास वाक्यविन्यास त्रुटि है (एक अनुपलब्ध :)।

2. flex-basis: 100% आइटम को कंटेनर की चौड़ाई में उतना विस्तार करने के लिए मजबूर करेगा, यहां तक ​​कि अगर यह कर सकता है तो साइडबार स्पेस में घुसपैठ कर सकता है। बस flex: 1 (flex-grow: 1, flex-shrink: 1, flex-basis: 0 के समान) का उपयोग करें, जो आइटम को केवल मुक्त स्थान का उपभोग करने के लिए कहता है।