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

On Thu, Nov 5, 2015 at 5:16 AM, Sergio Villar Senin <svillar@igalia.com> wrote:
> 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?

The example doesn't show what you think it does, but actually you're
right, your original example 1 and 2 are correct per spec right now.
In your example 2, or #one (height:min-content on parent), the parent
is a block, which always treats block-axis min-content as identical to
auto, so the child never even sees a min-content constraint.

fantasai, does this match what we want?

~TJ

Received on Friday, 6 November 2015 00:18:52 UTC