Re: Question re a sizing difference in grid/flexbox

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.
>>
>> https://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 https://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. :)
>    https://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

Received on Tuesday, 17 October 2017 05:20:18 UTC