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

Sorry for the long emails :)

On 29/09/15 17:23, fantasai wrote:
> 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'.

Note that I'm using percentages just to "simulate" what happens with
grid items but using "normal" blocks (I needed a way to specify relative
heights).

What I was trying to demonstrate is that the max-height restriction is
only applied to the container (only for heights I repeat) meaning that
its children still think that the height is 'auto', they are not re-laid
out using the fixed height value in max-height, otherwise they'll be
30px * 50% = 15px height.

Retaking my first email, you said that "According to the definition I
gave for min/max-width/height, first we do layout ignoring them. The
track and the grid container are 30px wide. This violates the min
constraint on the grid container, so we redo layout with the width value
as 100px instead of 'min-content'. The track and the grid container end
up as 100px wide."

So from my understanding, you're stating that we should redo layout for
children whenever we apply a min/max restriction. But as I have shown
this is not done for heights in "normal" blocks. Anyway perhaps we don't
want to do that for grids...

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

The problem is that there are so many potential combinations of min|max
functions, grid container's measurements and restrictions that it's
quite difficult to know as an implementor (and I guess as an author) how
the grid should behave.

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

Well I am not specially concerned about percentages (I was just using
them for the sake of my argumentation). The critical thing from my
understanding, is to perfectly specify what is the available size and
how to compute it, because as you know, the algorithm has 2 very
different paths for definite and indefinite sizes. There are many
different examples where I am not sure what to do, like

- <div style="height: 60px;"><div style="display:grid;"></div></div>
- <div style="max-height: 60px;"><div style="display:grid;"></div></div>
- <div style="display:grid; max-height: 60px;"></div>

Strictly following the definition all those grids have indefinite
heights, but as you said it looks like "common sense" dictates that they
should behave differently sometimes.

As this is the last design WD, I think everything about available and
free spaces is so critical to the algorithm that we must state very
clearly how they should behave and also the interactions with
min|max-content restrictions and min|max-height|width because there are
a lot of potential combinations that are not totally clear to me.

BR

Received on Wednesday, 30 September 2015 18:27:53 UTC