[css-grid] Flexible Track Sizing & Indefinite Avail Size

Dear CSS Grid editors,

I’m trying to understand the reasons behind the choice of the sizing 
algorithm of flexible tracks under no definite size constraint. As a 
reminder, please find quoted here the algorithm in question:

# The used flex fraction is the maximum of:
#
# - Each flexible track’s base size divided by its flex factor.
#
# - 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-content contribution.
#
# For each flexible track, if the product of the used flex
# fraction and the track’s flex factor is greater than the
# track’s base size, set its base size to that product.

While the reason behind the second set of constraints is obvious to me (we 
want flexible columns to at least encompass elements inside them, if we're 
free to give them any size we want), I'm not sure about the reason why the 
first set of constraints exist.

Also, if the plan is to make the layout system stable for flex factors 
approaching zero (like flexbox), then this first set of constraints will be 
annoying (as a very small flex factor can create huge track breadths (with a 
smart epsilon/epsilon-squared pair of flex factor; see test case), while a 0 
flex factor is identical to no flex at all which may result in collapsed 
columns).

I'm genuinely interested in the reasoning that shaped the design of this 
algorithm, and would already find helpful any answer providing a partial 
answer.

Best regards,
François

---------------------------------------------------------------------------------------

Test case on which people can experiment (in IE):

<div style="display: -ms-grid; -ms-grid-columns: auto; -ms-grid-rows: 
minmax(30px, 0.01fr) minmax(30px, 0.1fr);">
    <div style="background: green; min-height: 10px; min-width: 
600px; -ms-grid-row: 1;"></div>
    <div style="background: lime; min-height: 10px; min-width: 
600px; -ms-grid-row: 2;"></div>
</div>

In this example, the first element ends up 600x30px, the second one 
600x300px. I don't see why both elements being 600x30px wouldn't be a more 
natural outcome.

Received on Wednesday, 27 August 2014 15:17:59 UTC