-
Notifications
You must be signed in to change notification settings - Fork 753
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) isautoand 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