Re: [css-grid] About the meaning of being "sized under min|max-content constraint"

On 05/11/15 02:33, Tab Atkins Jr. wrote:
> On Wed, Oct 14, 2015 at 8:46 AM, Sergio Villar Senin <svillar@igalia.com> wrote:
>> On 22/09/15 02:07, fantasai wrote:
>>>>>
>>>>> It means when you're calculating the min-content/max-content
>>>>> contribution of the grid container, e.g. if the grid container
>>>>> happens to be inside a float (or is itself a float).
>>>>
>>>> Oh, so I had taken it completely wrong. OK, just to be 100% sure,
>>>> you mean that it does not apply for example to the following
>>>> example:
>>>>
>>>> <div style="display: grid; width: min-content;"></div>
>>>
>>> It does also apply to this example.
>>
>> I should have used a better example, as I'm mainly interested in
>> heights. So in the following 2 examples:
>>
>>   .grid { display:grid; grid-template: 20px / minmax(50px, 100px); }
>>
>>   <div class="grid" style="height: min-content"></div>
>>
>> and
>>
>>   <div style="height: min-content">
>>     <div class="grid"></div>
>>   </div>
>>
>> what are the expected height of the grid container and the height of the
>> first and unique row of the grid?
>>
>> In the code I'm planning to land in Blink soon those values are:
>>
>> * example 1: grid container height:  50px; grid row: 50px;
>> * example 2: grid container height: 100px; grid row: 100px;
>>
>> are those correct?
> 
> No.  Both of them should be 50px in example 2.  This is defined in
> <https://drafts.csswg.org/css-grid/#algo-grow-tracks>, where a
> min-sizing constraint (in this case inherited from its parent) sets
> the free space to zero, so the track stays at 50px (the minimum).

The problem is that such a behavior ("inheriting" the min-sizing
constraint) is not done at all for the rest of the blocks. Check this
example were I use vertical writing modes to emulate different values
for min-content and max-content for heights.

.verticalrl { -webkit-writing-mode: vertical-rl; }

.mincontent { height: min-content; }

<div id="one" class="mincontent">
  <div class="item verticalrl">XXX XXX</div>
</div>

<div id="two">
  <div class="item verticalrl mincontent">XXX XXX</div>
</div>

For #one the item takes as much height as it needs to position all the
text in one "column" (i.e. only obeys its auto height), but in #two the
item is indeed sized under min-content constraint. So, why should we
want to have a different behavior for grid containers?

BR

Received on Thursday, 5 November 2015 13:16:34 UTC