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

On 12/03/2014 03:18 AM, Sergio Villar Senin wrote:
>
> My point is, should we take into account {min/max}-{width/height} values
> set in the grid container when sizing the grid tracks? At least for me
> is not completely obvious. Let's use an example (assuming we're using
> Ahem font with size 10px).
>
> <div style="display: grid; width: min-content; min-width: 100px;">
>     <div style="grid-row: 1; grid-column: 1;">XXX XXX XXX</div>
> </div>
>
>>From my understanding there are 2 potential interpretations:
> a) min-width *does not* affect tracks sizing.
>
> So as the grid is under a min-content restriction that means that no
> extra space will be allocated so the track will be 30px wide (used
> breadth: 30px, max breadth: 110px).
>
> The grid container will be 100px wide anyway.
>
> b) min-width *does* affect tracks sizing.
>
> So despite being under min-content restriction we distribute space till
> we fulfill the min-width of the grid container. This means that the
> track will grow till 100px (used breadth: 100px, max breadth: 110px).
>
> Which is the right one?
>
> Now should b) be correct one, things become a bit complex because I
> guess we should also check that the values of {min/max}-{width/height}
> are definite.

b) is the right one. Here's why. 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.

Does that make sense?

~fantasai

Received on Thursday, 18 December 2014 19:35:25 UTC