[css-grid] Resolve Intrinsic Track Sizes: min-content vs auto minimums


I've a doubt regarding this section:

Specifically in the point "1. Size tracks to fit non-spanning items" I'm
wondering about the difference between "For min-content minimums" vs
"For auto minimums". Summarizing the spec says:
* For min-content minimums: [...] maximum of the items' min-content
* For auto minimums: [...] specified by their respective min-width or
min-height properties [...]

So, let's use the following example [1]:
<div style="display: grid; width: min-content;">
  <div style="width: 100px; min-width: 0px;"></div>

If we've "grid-template-columns: auto;", we'll apply "for auto
minimums", so we'd use 0px as specified by "min-width".
The result would be a column of 0px width (and a grid of 0px too).
The item will be 100px width anyway.

However, if we've "grid-template-columns: min-content;", we'll apply the
option "for min-content minimums", so we'd use the "min-content
contribution" [2], which is 100px in this case.
The result would be a column of 100px width (and a grid of 100px too).

This difference between "auto" vs "min-content" column, in a grid being
sized under a min-content constraint, seems really strange. Actually the
fact that we can have an intrinsic column of 0px when the item inside
that column has a 100px width is quite strange.

The behavior described above is the current one implemented in both
Blink and Firefox.

Is this a wrong wording in the spec or a bug in the implementations?
Should we update the spec?

On a related note, I've also doubts regarding "min-width: auto;".
Imagine that we use "min-width: auto;" instead of "min-width: 0px;" in
the previous example [3].

I'm wondering what's what's the "min-content contribution" of the grid
item in that case: 100px or 0px. I guess it's 100px, at least that's
what both Blink and Firefox consider if we've "grid-template-columns:

However, if we've "grid-template-columns: auto;", Firefox considers it
should use the "min-width" and follow the "implied minimum size" section.
So according to the table there, it uses min(specified, content), which
in this case would be min(100px, 0px), so Firefox is using 0px here.
Blink is currently using 100px as size of this track.

What's the expected behavior for this case?

Thanks for your time,

[1] http://jsbin.com/lilopo/1/edit?html,css,output
[2] https://drafts.csswg.org/css-sizing-3/#min-content-contribution
[3] http://jsbin.com/povapi/1/edit?html,css,output
[4] https://drafts.csswg.org/css-grid/#min-size-auto

Received on Thursday, 5 November 2015 13:27:48 UTC