Skip to content

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

Closed
@Loirooriol

Description

@Loirooriol

Consider this testcase:

<div id="grid">
  <div id="item">Text</div>
</div>
#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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions