[css-flexbox][css-grid][css-box-sizing] - Wrapped text does not reduce box size width

[Dan503]

Note that the blue in the examples represent what flexbox and CSS Grid percieve to be the size of the item content. The white space around the blue is the calculated white space distribution.

How flexbox currently works

There is one long item whose text will wrap. All other items are short one word items.

When the long item text wraps, flexbox does not use the new wrapped text width for its measurements. It still takes up space assuming that the text has not wrapped. This gives the long item far more space than it needs in the layout. This throws off the white space balance in the design.

It also makes things with lots of text appear more important than their sibling elements. In reality the item is just as import as the other items.

Also a problem in CSS Grid

grid-template-columns: repeat(9, auto);

How I wish flexbox and CSS Grid worked instead

I wish flexbox and Grid could factor in the width of the text after it has wrapped when calculating how wide the item content is.

This would allow for much better white space distribution in practically all implementations.

To prevent potential backwards compatibility issues, a new CSS property could be added to the flex/grid container to get the desired box sizing behavior.

---

Codepen version of this issue showing source code for examples:
https://codepen.io/daniel-tonon/pen/VwLmqvb

CSS Grid Track sizing spec
https://drafts.csswg.org/css-grid/#algo-track-sizing

Flexbox sizing spec
https://drafts.csswg.org/css-flexbox/#main-sizing

[rachelandrew]

There's a subtle difference in how flexbox and grid work this out, flexbox works from max-content and removes space. Grid works from min-content and adds space. You can see this difference in my fork: https://codepen.io/rachelandrew/pen/abOBgBM. However to do what you are suggesting I think would involve doing that work, then going back over to see what the resulting sizes were and doing another pass to redistribute space.

You only have two words in your long content, however if you consider a grid track with lots of different items in a column of varying sizes. They would all need to be laid out (as you presumably don't want everything at min-content size) to work out how big they actually are and if there is some extra space due to that wrapping which can then be redistributed. Whether that's feasible, I don't know, but it seems like a lot of work.

Seems like it might be more called for in flex layouts than grid. Where I can see the use case of wanting more space round the items, and we are only dealing with one flex line in terms of the distribution. I think in grid you might be better to more proactively control your column sizes than leave them to be auto sized.

[Dan503]

Rachel is right. This primarily is a problem for me in flexbox.

The primary use case for me is having a list of horizontal navigation items that I want flexbox to control the spacing for. Most of the nav items are just one word like "home" or "about" but some of the nav items are longer and made up of 2 or 3 words like "upcoming events" or "how we work".

When this happens, flexbox does not distribute the white space in a way that a designer would distribute the white space. This is because flexbox does not take word wrapping into account.

The only reason that I mentioned Grid was because I wanted to see if I could replicate the same sort of thing in CSS Grid. I've never actually had a use case where I've needed to worry about this since I'm usually taking more control over the column sizing in Grid as Rachel suggests. (I haven't used Grid enough in my projects yet though to know if this does have a use case in Grid)

If getting this fixed for flexbox means taking Grid out of scope then I can probably live with that. This is primarily a problem in flexbox.

[SelenIT]

Isn't it another case of the general "tight wrapping" aka "true shrinkwrap" problem (#191)?

[Dan503]

Ahhh right. Yes. I'll close this in favour of that issue.