W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2016

Re: [csswg-drafts] [css-grid] Intrinsic size computation with orthogonal grid items.

From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
Date: Mon, 19 Dec 2016 23:54:18 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-268113389-1482191656-sysbot+gh@w3.org>
As fantasai said, intrinsic sizes *can* depend on layout in a few 
cases, of which this is one.  In particular, the intrinsic width of 
the first item is the laid-out width, given a height of 50px (the row 
height), which is two lines-worth (2em, in the Ahem font).  This 
"assumed" available height is specified in step 1 of the layout algo 
(it spans a single fixed-height row).  The second item's intrinsic 
width is just the normal min-content size, which is the width of two 
Xs (2em, in the Ahem font).

Passing this thru the layout algorithm, we find then that the two 
columns get their base size set to these widths (so 2em each in Ahem),
 and their growth limits set to, respectively, two lines-worth (2em in
 Ahem) and 3 Xs + a space (4em in Ahem). However, there's no free 
space, so they stick at their base size, 2em each.

Step 2 of the layout algo is trivial - the row is 50px high.

Step 3 is a no-op - setting the row to 50px high didn't change the 
min-content contribution of any element, because we'd already assumed 
the row would be 50px high.

Step 4 isn't relevant for us.

---

So the grid container's width should be 4em, with the two elements 
next to each other.

* Chrome makes the items overflow the grid container, because it 
assumes the min-content width of the first grid item is a single 
line-worth.  (I presume it does layout into infinite available height,
 rather than what the spec mandates.)  However, it then sets the 
actual width of the column correctly, so the grid overflows the grid 
container.

* Firefox appears to make the same mistake, but it never resizes the 
first column, so the first grid item ends up overflowing its column 
and painting partially underneath the second item.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/537#issuecomment-268113389 
using your GitHub account
Received on Monday, 19 December 2016 23:54:24 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:30:27 UTC