- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Thu, 5 Nov 2015 16:18:04 -0800
- To: Sergio Villar Senin <svillar@igalia.com>
- Cc: www-style list <www-style@w3.org>
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