how does the browser calculate width of flex items?
https://jsfiddle.net/FreTimmerman/1uo87vfb/12/
asking this for a friend.
he (and i) wants to know why on the top row, the text is wrapping however the element itself is much wider
how can it be solved that the block only takes the space needed for those 2 lines of text?
min-content obviously doesn't work since it then wraps into 3 linesEdit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
6 Replies
Hopefully I'm able to explain this in a clear and consise way, lol
The way the size of an element is calculated is it first figures out the
content-size of the element, BEFORE shrinking, but AFTER making it into a column.
It would be the equivalent to if you set width: max-content.
Once it knows the content-size of every flex item, then it goes to shrink things.
Starting with the second example, it doesn't need to shrink them, as both can fit next to one another as is, so it leaves them alone.
In the top example, both element cannot fit inside the parent.
When they cannot fit, they'll shrink by the least amount required to fit within the parent. The text then flows within that space, and it just so happens that the longer word there causes it to wrap like that and leave a big space on the right.
If you want a deeper breakdown of how the flex algorithm works, and how the actual shrink sizes are calculated, I did a deep-ish dive in this CSS tricks article: https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/that confirms my first guesses on how this was caused
am i correct that in this case the only solution is to use a combination of
floatand/or inline elements?
either that or do the calculation of the width myself with absolute units? (which i really prefer not to given the context of i18n and multiple text lengths etc.)I don't think that would change the behavior tbh.
a flex-item behaves a lot like and
inline for the width. It has to do with how widths are calculated, and once text wraps, that element basically becomes 100% width of whatever it's inside.
The only real solution I can think of is to allow word-breaks
You could use something like width: min-content, but I doubt that's what you're afteri already tried the
min-contentbut that shrinks it down to the bare minimum which is too small
word-breaks probably won't be an option as well
i was thinking to solve this by putting the X in the front š
though that probably is not preferred in the design either
š¤·
either way, thanks a lot for your clear explanationfixed size on the left would 100% make it easier, lol
Pretty sure you're rubbing up against the limitations of how inline flow content is calculated if you need the widths to be more variable...
Unknown Userā¢14mo ago
Message Not Public
Sign In & Join Server To View