Re: Question re a sizing difference in grid/flexbox

# fantasai (8 days ago)

Copying www-style because this was a very interesting question.

On 10/16/2017 03:33 AM, Rachel Andrew wrote:

Hi - hopefully a quick question.

Been building a whole bunch of sizing examples for a talk, but also to make sure I properly understand it all myself :D

I am wondering why this behaves differently in grid and flexbox.

codepen.io/rachelandrew/pen/1d0cb45dd6048547576cbf42a01c6f19

In the flex example the smaller tracks have collapsed to min-content, allowing the one with a lot of content to get as big as it can.

In grid unless I actually use min-content as the track size, they don’t soft-wrap unless I add additional content.

There seems to be interop, so I figured I’ve missed something and wondered why this behaves differently between layout methods as this section tends to refer back to the flexbox model drafts.csswg.org/css-grid/#min-size-auto.

Oh, this is a realllllly good question, and I think something we hadn't really thought about at all.

Here's what's going on:

Flexbox starts from the max-content size. It realizes it doesn't have enough space, so it starts to distribute negative space to the items. The distribution is in proportion to their flex shrink ratio multiplied by their flex basis, so the item with the long text shrinks more rapidly, but they all shrink to some extent until everything fits, with each item flooring at its min-content size.

Grid starts from the min-content size. It realizes it has extra space to distribute, so it starts distributing space--equally-- to each track, capping each one at its max-content size.

To get Grid's behavior in Flexbox, you need to use a 'flex-basis' of 'min-content': then it will run the same algorithm as Grid. (I'm not sure if that's supported yet; if not feel free to file bugs, as that feature has been exceptionally resolved for release even though Sizing isn't CR yet. :) drafts.csswg.org/css-2017/#experimental

~fantasai

Contact us to advertise here
# fantasai (8 days ago)

On 10/16/2017 09:48 PM, fantasai wrote:

Copying www-style because this was a very interesting question.

On 10/16/2017 03:33 AM, Rachel Andrew wrote:

Hi - hopefully a quick question.

Been building a whole bunch of sizing examples for a talk, but also to make sure I properly understand it all myself :D

I am wondering why this behaves differently in grid and flexbox.

codepen.io/rachelandrew/pen/1d0cb45dd6048547576cbf42a01c6f19

In the flex example the smaller tracks have collapsed to min-content, allowing the one with a lot of content to get as big as it can.

In grid unless I actually use min-content as the track size, they don’t soft-wrap unless I add additional content.

There seems to be interop, so I figured I’ve missed something and wondered why this behaves differently between layout methods as this section tends to refer back to the flexbox model drafts.csswg.org/css-grid/#min-size-auto.

Oh, this is a realllllly good question, and I think something we hadn't really thought about at all.

Here's what's going on:

Flexbox starts from the max-content size. It realizes it doesn't have enough space, so it starts to distribute negative space to the items. The distribution is in proportion to their flex shrink ratio multiplied by their flex basis, so the item with the long text shrinks more rapidly, but they all shrink to some extent until everything fits, with each item flooring at its min-content size.

Grid starts from the min-content size. It realizes it has extra space to distribute, so it starts distributing space--equally-- to each track, capping each one at its max-content size.

To get Grid's behavior in Flexbox, you need to use a 'flex-basis' of 'min-content': then it will run the same algorithm as Grid. (I'm not sure if that's supported yet; if not feel free to file bugs, as that feature has been exceptionally resolved for release even though Sizing isn't CR yet. :) drafts.csswg.org/css-2017/#experimental

('flex: min-content' to be exact, since we also need flex-grow of 1.)

Also you'd need to cap it at max-content like item { flex: min-content; max-width: max-content; } so that all extra space goes to the larger item rather than padding the smaller ones.

Mozilla supports these keywords under -moz- prefixes.

One behavior you can't get with Flexbox is Grid's auto behavior under justify-content: stretch, though--that extra phase of space distribution doesn't exist under Flexbox.

It might be worth thinking about whether we want to align these behaviors more somehow, if that's even possible.

~fantasai

Want more features?

Request early access to our private beta of readable email premium.