मैं टेक्स्ट-लिपटे स्पैन के चारों ओर एक फ्लेक्स आइटम को कैसे छोटा कर सकता हूं?

Question

मुझे यह भी सुनिश्चित नहीं है कि यह संभव है, तो मैं यह पता लगाने की कोशिश कर रहा हूं कि क्या मैं टेक्स्ट-लिपटे हुए एक स्पैन के चारों ओर एक फ्लेक्स आइटम को छोटा कर सकता हूं।

यह वह जगह है जहां मैं दूसरी पंक्ति देखता हूं, तो मैं पाठ के दाईं ओर सफेद जगह को खत्म करने की कोशिश कर रहा हूं।

body { 
 
    height: 75%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body > div { 
 
    min-height: 55px; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
     -ms-flex-direction: row; 
 
      flex-direction: row; 
 
    border-bottom: 1px solid black; 
 
    width: 225px; 
 
} 
 
body > div > div { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 1 auto; 
 
     -ms-flex: 1 1 auto; 
 
      flex: 1 1 auto; 
 
    border-right: 1px solid black; 
 
} 
 
body > div > div span { 
 
    font-size: 21px; 
 
} 
 
body > div > div:nth-child(1) { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 1 auto; 
 
     -ms-flex: 0 1 auto; 
 
      flex: 0 1 auto; 
 
}

<div> 
 
    <div><span>Some text regular</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>howdoishrinkthis flexitemtotext</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>Some text regular</span></div> 
 
    <div></div> 
 
</div>

Answer 1

शून्य करने के लिए flex-basis सेट करके, आप अपने न्यूनतम आकार करने के लिए एक लचीला आइटम हटना होगा। तो यह पाठ करने के लिए फिट होगा, लेकिन यह भी रैप करने के लिए अपने पाठ के लिए बाध्य करेगा:

body > div { 
 
    min-height: 55px; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
     -ms-flex-direction: row; 
 
      flex-direction: row; 
 
    border-bottom: 1px solid black; 
 
    width: 225px; 
 
} 
 
body > div > div { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 1 auto; 
 
     -ms-flex: 1 1 auto; 
 
      flex: 1 1 auto; 
 
    border-right: 1px solid black; 
 
} 
 
body > div > div span { 
 
    font-size: 21px; 
 
} 
 
body > div > div:nth-child(1) { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 1 0; 
 
     -ms-flex: 0 1 0; 
 
      flex: 0 1 0; 
 
}

<div> 
 
    <div><span>Some text regular</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>howdoishrinkthis flexitemtotext</span></div> 
 
    <div></div> 
 
</div>

Answer 2

नीचे समाधान सही नहीं है, लेकिन यह करने के लिए फ्लेक्स आइटम खींच करता है लंबे शब्दों के लिए भी पाठ। यह करके पूरा करता है:

1. पाठ कंटेनर (span)
2. लंबे शब्द को तोड़ने फ्लोटिंग (और उन्हें ब्राउज़रों कि समर्थन हायफ़नेशन में hyphenating)

body { 
 
    height: 75%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body > div { 
 
    min-height: 55px; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
     -ms-flex-direction: row; 
 
      flex-direction: row; 
 
    border-bottom: 1px solid black; 
 
    width: 225px; 
 
} 
 
body > div > div { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 1 auto; 
 
     -ms-flex: 1 1 auto; 
 
      flex: 1 1 auto; 
 
    border-right: 1px solid black; 
 
} 
 
body > div > div span { 
 
    float: left; 
 
    font-size: 21px; 
 
    overflow-wrap: break-word; 
 
    word-wrap: break-word; 
 

 
    -ms-word-break: break-all; 
 
    word-break: break-word; 
 

 
    -ms-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -webkit-hyphens: auto; 
 
    hyphens: auto; 
 
} 
 
body > div > div:nth-child(1) { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 1 auto; 
 
     -ms-flex: 0 1 auto; 
 
      flex: 0 1 auto; 
 
}

<div> 
 
    <div><span>Some text regular</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>howdoishrinkthis flexitemtotextevenlonger and more and more and mroe text</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>Some text regular asdf asdf</span></div> 
 
    <div></div> 
 
</div>