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

I don't think the grid track sizing algorithm today specifies how to handle the min-height/max-height (or -width) properties when the available space is indefinite.  Does the following behavior make sense?  (I'm using "min-height"/"max-height" for convenience, but I think the same behavior would apply for min-width/max-width when the grid is sized under a min-content/max-content constraint.)

In step 11.6, when the available space is indefinite and the max-height is definite, the free space is computed by subtracting the base sizes of the grid tracks from the max-height.

Example 1:
<div style="display:grid; grid-template-rows:minmax(100px, 200px); height:auto; max-height:150px"></div>
Expected: The height of the first row is 150px.  The height of the grid is 150px.
	
In step 11.7, when determining the used flex fraction, if the free space is indefinite and the max-height is definite, the used flex fraction is the minimum of

1. The maximum of
     a. Each flexible track's base size divided by its flex factor.
     b. The result of finding the size of an fr for each grid item that crosses a flexible track, using all the grid tracks that the item crosses and a space to fill of the item's max-size contribution.
     c. The result of finding the size of an fr using all of the grid tracks and a space to fill of the min-height. 

2.  The result of finding the size of an fr using all of the grid tracks and a space to fill of the maximum of the max-height and min-height.

If the max-height is not definite, the used flex fraction is #1 above.

(1.a. and 1.b. are the existing terms in 11.7.)

Example 2:
<div style="display:grid; grid-template-columns:1fr; height:auto; max-height:150px;">
	<div style="height:100px;"></div>
</div>
Expected: The height of the first row is 100px.  The height of the grid is 100px.

Example 3:
<div style="display:grid; grid-template-columns:1fr; height:auto;max-height:150px;">
	<div style="height:200px;"></div>
</div>
Expected: The height of the first row is 150px.  The height of the grid  is 150px.  The item overflows the row and the grid.

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.

Thoughts?

Thanks,
Peter

Received on Monday, 14 April 2014 22:30:54 UTC