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

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 
(http://jsbin.com/dibuniqaya/edit?html,css,output)

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>

     <div id="sample2" style="height: 30px;">
	<div class="item1">XXX</div>
	<div class="item2">XXX</div>
     </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>
</div>

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

Is that correct?

BR