[csswg-drafts] [css-align] Does stretch work when width/height only behaves as auto? (#4525)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-align] Does stretch work when width/height only behaves as auto? ==
Consider this [testcase](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A%23grid%20%7B%0A%20%20display%3A%20grid%3B%0A%20%20width%3A%20100px%3B%0A%20%20height%3A%20100px%3B%0A%20%20grid-template%3A%20100%25%20%2F%20100%25%3B%0A%20%20background%3A%20yellow%3B%0A%7D%0A%23item%20%7B%0A%20%20height%3A%20max-content%3B%0A%20%20align-self%3A%20stretch%3B%0A%20%20background%3A%20cyan%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%20id%3D%22grid%22%3E%0A%20%20%3Cdiv%20id%3D%22item%22%3EText%3C%2Fdiv%3E%0A%3C%2Fdiv%3E):

```html
<div id="grid">
  <div id="item">Text</div>
</div>
```
```css
#grid {
  display: grid;
  width: 100px;
  height: 100px;
  grid-template: 100% / 100%;
  background: yellow;
}
#item {
  height: max-content;
  background: cyan;
}
```

The grid item has `height: max-content`. As resolved in #2708, this only behaves as `auto`, but doesn't compute to `auto`.

It also has the default `align-self: normal`, which behaves as `align-self: stretch` for grid items.

From https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch,

> When the box’s computed `width`/`height` (as appropriate to the axis) is `auto` and neither of its margins (in the appropriate axis) are `auto`, sets the box’s used size to the length necessary to make its outer size as close to filling the alignment container as possible

The quote says "computed `height` is `auto`", which technically doesn't hold. So in Chromium, the item is not stretched. But Firefox thinks that the spec actually means "behaves as `auto`" (which has been a very frequent mistake in the specs), so it stretches the item.

Which is it? I prefer Chromium's behavior, if an author sets `height: max-content`, I think it's reasonable to assume they desire to size it according to the content, not stretch it to fill the container.

Context: https://bugzil.la/1597055. CC @emilio 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4525 using your GitHub account

Received on Thursday, 21 November 2019 11:34:12 UTC