Menu
I'm not even sure if this is possible, I'm trying to figure out if I can shrink a flex item around a span that is text-wrapped.
This is where I'm at now, if you look at the second row, I'm trying to eliminate whitespace to the right of the text.
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>
550
The CSS flex-shrink syntax flex-shrink only requires specifying one value in a unitless number: flex-shrink: value; The default value for CSS flex-shrink is 1 , which means the element cannot shrink further than the size required to fit its content. If you define 0 as the value, the flex item will not shrink at all.
As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep . right on the same line. The text will automatically wrap when there is not enough space.
If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink . In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis , and normally defined using the flex shorthand.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
By setting the flex-basis to zero, you will shrink a flexible item to its minimum size.
So it will fit to the text, but it will also force your text to wrap:
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
