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

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