Re: Question re a sizing difference in grid/flexbox

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

~fantasai

Received on Tuesday, 17 October 2017 04:49:00 UTC