W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2017

Re: [csswg-drafts] [css-align][css-grid] Baseline self-alignment may affect the intrinsic size contribution of the alignment subject.

From: Manuel Rego Casasnovas via GitHub <sysbot+gh@w3.org>
Date: Tue, 09 May 2017 12:36:16 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-300149400-1494333374-sysbot+gh@w3.org>
Let's modify a little bit @javifernandez's example and try to re-explain the issue.

```html
<div style="display: inline-grid; border: solid thick; margin: 100px;
            grid-auto-columns: 100px; align-items: baseline;">
  <div style="height: 50px; background: cyan;"></div>
  <div style="height: 200%; background: magenta;"></div>
  <div style="height: 25px; grid-column: span 2; background: yellow; opacity: 0.7;"></div>
</div>
```

The current output in Chrome is the following:
![Current output of previous example in Chrome](https://cloud.githubusercontent.com/assets/11602/25851099/ae4784b2-34c4-11e7-9ce4-180c5f0772df.png)

The reason why it looks like this is basically:
* Initially we check the height of the element sin the first row.
  The 1st item (the cyan one) has a fixed height of 50px.
  The 2nd item (the magenta one) has a percentage height, as the track is auto, it uses its content size which is 0px at that point.
* We take the maximum of these sizes 50px and 0px as the baseline offset.
* Then the final size of the items, once the track size is resolved to 50px, is 50px for the 1st item and 100px (200% of 50px) for the 2nd one.
* We use the baseline offset to place the items:
  First item: 50px - 50px = 0px (no offset).
  Second item: 50px - 100px = -50px.

So the 2nd item (the magenta one) overflows on the top of its grid area (the first track).

Our question is if this is (or not) the expected behavior.

Or if it should be something like this:
![Different output where the overflow happens at the bottom](https://cloud.githubusercontent.com/assets/11602/25851113/c06608a8-34c4-11e7-8f5f-f43a7b4de7cf.png)

Where the first track would still be 50px, but the 1st item (the cyan one) will be moved 50px and the 2nd item (the magenta one) will be aligned to the top of the track.
In that case both items will be overflowing its grid area (the first track) at the bottom.

What do you think? Thanks!


-- 
GitHub Notification of comment by mrego
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1039#issuecomment-300149400 using your GitHub account
Received on Tuesday, 9 May 2017 12:36:23 UTC

This archive was generated by hypermail 2.3.1 : Monday, 23 October 2017 10:12:53 UTC