RE: [css-grid] min-height and max-height in track sizing algorithm

fantasai wrote:
> 
> I think the general principle, under the somewhat over-specific definition of
> min/max-width/height [1] is to
>    a) Do layout ignoring these properties.
>    b) If that violated a max constraint, do it again with that
>       constraint as the specified value.
>    c) If we're now violating a min constraint, do it again with
>       the min constraint as the specified value.
> [1] http://www.w3.org/TR/CSS21/visudet.html#min-max-widths
> 
> Probably this is the right definition to have, although certainly
> implementations would want to optimize for a single pass on the layout if
> possible. :) I think ideally the definition should be in the definition of
> min/max-width/height so we don't have to repeat it in every layout spec.
> Unfortunately CSS2.1's definition is a bit too specific to block layout.
> 
> Maybe the action item here is to import the definition into Sizing.

I like this definition, but I think it's not quite true with block layout today:

<div style="min-height:100px;">
    <div style="height:100%;">this div is not 100px tall</div>
</div> 

Which leads to the question: should the first row be sized differently in these two cases?

1) <div style="display:grid; grid-template-rows:1fr; min-height:100px;"></div>
2) <div style="display:grid; grid-template-rows:100%; min-height:100px;"></div>

In my last message, I proposed making the flexible row 100px, but I think the unresolved percentage row should still be 0px.  So there might need to be a qualifier to your rules above that percentage heights don't resolve against the min or max constraints.  I think the difference stems from the fact that flexible rows operate against the remaining space, while percentage rows/heights operate against the entire space and can cause cycles.

> 
> Going through your examples...
> 
> > Example 4:
> > <div style="display:grid; grid-template-columns:1fr; height:auto;
> > min-height:50px;"></div>
> > Expected: The height of the first row is 50px.  The height of the grid is 50px.
> >
> > Example 5:
> > <div style="display:grid; grid-template-columns:1fr; height:auto;
> > min-height:150px; max-height:50px;"></div>
> > Expected: The height of the first row is 150px.  The height of the grid is
> 150px.
> 
> I disagree on these two. Here the rows are sized as 'auto', which means
> they're sized to their content. Since there's no content, the row height
> should be zero. The grid container will still be 150px, though. (If the grid
> contained a small item, then we could see the difference in effect by setting
> alignment properties.)

Oops, I had a typo in these cases -- I meant to write "grid-template-rows:1fr", instead of "grid-template-columns:1fr".  With that change does the "expected" behavior make sense?

Peter

Received on Friday, 18 April 2014 18:06:14 UTC