Re: [css-grid] Interactions between min/max-content and min/max-width

On 09/29/2015 04:41 AM, Sergio Villar Senin wrote:
>
> 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?

What's happening in the example you're citing isn't about free space,
it's about percentage resolution. Percentages are defined to behave
as 'auto' when the containing block height is 'auto'.

> 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?

I think it would make more sense in this case for the available space
to be 20px, not infinite, so I would say that the grid itself is also
20px tall.

That said, we should probably clarify this in the spec, and also
specify explicitly how percentages behave one way or another--since
the rules for height and width do not apply to grid-template-rows/cols
unless we says so, and it should be stated whether the rules are the
same or different than width/height so there is no confusion.

~fantasai

Received on Tuesday, 29 September 2015 15:24:27 UTC