Description
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) isauto
and neither of its margins (in the appropriate axis) areauto
, 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