Làm cách nào để thu nhỏ một mục flex quanh một khoảng văn bản được bao bọc?

Question

Tôi thậm chí không chắc chắn nếu điều này là có thể, tôi đang cố gắng tìm ra nếu tôi có thể thu nhỏ một mục flex xung quanh một khoảng đó là văn bản bọc.

Đây là nơi tôi đang ở bây giờ, nếu bạn nhìn vào hàng thứ hai, tôi đang cố gắng loại bỏ khoảng trắng ở bên phải của văn bản.

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

Bằng cách đặt các flex-basis bằng không, bạn sẽ giảm một mục linh hoạt để kích thước tối thiểu của nó. Vì vậy, nó sẽ phù hợp với các văn bản, nhưng nó cũng sẽ buộc văn bản của bạn để quấn:

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

Các giải pháp dưới đây không phải là hoàn hảo, nhưng nó kéo mục flex đến văn bản ngay cả đối với các từ dài. Nó hoàn thành điều này bằng cách:

1. Floating container văn bản (span)
2. Breaking từ lâu (và hyphenating chúng trong trình duyệt hỗ trợ dấu gạch nối)

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>