W3C home > Mailing lists > Public > www-style@w3.org > March 2016

[css-grid] fr units and minmax() mins

From: Eric A. Meyer <eric@meyerweb.com>
Date: Tue, 22 Mar 2016 21:19:12 -0400
To: "www-style list" <www-style@w3.org>
Message-ID: <957EDA74-65A0-4FD8-AB41-1B359D614A28@meyerweb.com>
The behavior of flex items in the 'min' position of a minxmax() is 
somewhat confusing to me.  It's explained quite clearly, but what's 
explained doesn't really gel for me, conceptually speaking.

To quote 
<https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax>:

"minmax(min,max)
	Defines a size range greater than or equal to min and less than or 
equal to max. If max < min, then max is ignored and minmax(min,max) is 
treated as min. As a maximum, a <flex> value sets the track’s flex 
factor. As a minimum, it is treated as zero (or min-content, if the grid 
container is sized under a min-content constraint)."

So if I declare:

	grid-template-columns: 100px minmax(3fr, 300px) 1fr 100px;

..then the third column (1fr) will flex all the way down until it 
reaches zero width.  At that point, the second column, the minmaxed one, 
will start to flex narrower.  The two never flex at the same time.

My expectation, before reading that passage closely, was that the above 
CSS would cause the second column to be given `3fr` sizing until it 
reached 300 pixels in width, at which point it would stop growing.  
Thus, below that width, the second and third columns would flex and be 
sized at a 3:1 ratio, using whatever space was left over after the first 
and fourth columns were placed.  Above that width, the first, second, 
and fourth columns would all be fixed-width, and the third would get all 
the flex space.  Was my expectation.

I have to admit the reasoning behind the current behavior eludes me.  
Why are flexible mins force-set to zero?

--
Eric A. Meyer - http://meyerweb.com/
Received on Wednesday, 23 March 2016 01:19:39 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:37 UTC