- 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