W3C home > Mailing lists > Public > www-style@w3.org > September 2015

Re: [css-grid] Interactions between min/max-content and min/max-width

From: Sergio Villar Senin <svillar@igalia.com>
Date: Tue, 29 Sep 2015 10:41:41 +0200
To: fantasai <fantasai.lists@inkedblade.net>, www-style@w3.org
Message-ID: <560A4EC5.6050306@igalia.com>
On 18/12/14 20:33, fantasai wrote:
> On 12/03/2014 03:18 AM, Sergio Villar Senin wrote:
>> My point is, should we take into account {min/max}-{width/height} values
>> set in the grid container when sizing the grid tracks? At least for me
>> is not completely obvious. Let's use an example (assuming we're using
>> Ahem font with size 10px).
>> <div style="display: grid; width: min-content; min-width: 100px;">
>>     <div style="grid-row: 1; grid-column: 1;">XXX XXX XXX</div>
>> </div>
>>> From my understanding there are 2 potential interpretations:
>> a) min-width *does not* affect tracks sizing.
>> So as the grid is under a min-content restriction that means that no
>> extra space will be allocated so the track will be 30px wide (used
>> breadth: 30px, max breadth: 110px).
>> The grid container will be 100px wide anyway.
>> b) min-width *does* affect tracks sizing.
>> So despite being under min-content restriction we distribute space till
>> we fulfill the min-width of the grid container. This means that the
>> track will grow till 100px (used breadth: 100px, max breadth: 110px).
>> Which is the right one?
>> Now should b) be correct one, things become a bit complex because I
>> guess we should also check that the values of {min/max}-{width/height}
>> are definite.
> b) is the right one. Here's why. According to the definition I gave
> for min/max-width/height, first we do layout ignoring them. The
> track and the grid container are 30px wide. This violates the min
> constraint on the grid container, so we redo layout with the width
> value as 100px instead of 'min-content'. The track and the grid
> container end up as 100px wide.
> Does that make sense?

I'd like to bring this old thread back to life since I am not totally 
sure about the behavior you describe because AFAIK no web engine behaves 
like that for _heights_ in "normal" blocks (for widths it's exactly as 
you explained). Let's go over a simple example 

div { font: 50px/1 Ahem; }
.item1 { height: 50%; background-color: red; }
.item2 { height: 50%; background-color: blue; }

    <div id="sample1" style="max-height: 30px;">
	<div class="item1">XXX</div>
	<div class="item2">XXX</div>

     <div id="sample2" style="height: 30px;">
	<div class="item1">XXX</div>
	<div class="item2">XXX</div>

According to the definition you gave both blocks of code should behave 
the same because in sample1, we layout with "height: auto" and since the 
resulting height is >30px then we should proceed to layout with 30px. 
The items in sample2 are 15px height (50% of the container's height). 
Contrary to that, the items in sample1 are as height as their contents 
meaning that they weren't re-laid out (their percentage heights are 
still resolved to auto).

So my question is, should we use the same behavior for grids? i.e. 
should we use min|max-height|width just to constraint the grid container?

That would mean that in the following example:

div { font: 10px/1 Ahem; }
.grid {
   display: grid;
   grid-template-rows: minmax(10px, 100px);

<div class="grid" style="width: 40px; max-height: 20px;">
   <div>XXXX XXXX XXXX XXXX</div>

the grid container would be 20px height but the grid row would be 100px 
height (as the height is indefinite).

Is that correct?

Received on Tuesday, 29 September 2015 08:42:08 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:57 UTC