- From: Manuel Rego Casasnovas via GitHub <sysbot+gh@w3.org>
- Date: Wed, 22 Mar 2017 17:29:55 +0000
- To: public-css-archive@w3.org
Ok, so more thoughts on this... after some discussions with @svillar. Thanks! Coming back to case 3). I believe now it's not a Chrome bug either. Let me explain why. The example was: ```html <div style="display: grid; width: 200px;"> <img style="width: 100%;" src="http://placehold.it/50x50"> <div style="background: yellow;">Item (2nd row)</div> </div> ``` The problem is that the item in the 2nd row was adding noise to the example. And I was missing it. So let's start for a case without the 2nd item. A) ```html <div style="display: grid; width: 200px;"> <img style="width: 100%;" src="http://placehold.it/50x50"> </div> ``` Here to resolve the size of the `auto` column, we check our children. `auto` is somehow equivalent to `minmax(auto, max-content)`. The image has `width: 100%;` which cannot be resolved as the column has `auto` size, so for the minimum track size we consider 0px. And we use 50px, the content size of the image as maximum track size. And for the row, we use 50px too (the content size of the image). Then the column size is affected by the default `justify-content: stretch;` which makes the `auto` column to grow up to 200px. The image is sized against that size of the column, so it ends up being 200x200. However the row is still 50px. If we use `justify-column: start;` then the column and the row are 50px and the image is 50x50 too (B). Now the example with the item. Imagine that it has exactly 100px width: C) ```html <div style="display: grid; width: 200px;"> <img style="width: 100%;" src="http://placehold.it/50x50"> <div style="background: yellow;">Item (2nd row)</div> </div> ``` Here, to calculate the size of the `auto` column, we take into account the 100px width of the item in the 2nd row. Which are bigger than the content size of the image 50px. So the column is initially 100px. For the row the minimum size is 50px, but we can grow up to 100px and as there's room enough, it's also 100px. Then again the `justify-content: stretch;` makes it grow the column to 200px. And the size of the image is 200x200. While the row is still 100px. Again if we use `justify-column: start` the column and the row are 100px and the image is 100x100 (D). So we believe Chrome behavior is the expected one. Does it make sense? Next you can see an image with the results of the cases explained here.  -- GitHub Notification of comment by mrego Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1117#issuecomment-288476756 using your GitHub account
Received on Wednesday, 22 March 2017 17:30:04 UTC