I found minmax to have very curious behaviour, which I couldn't find explanation for.
I would expect below code to overflow if second column has text that's long, "ideal size" should be preserved.
.grid {
border: 1px solid;
display: grid;
max-inline-size: 300px;
}
.minmax {
/* it looks like minmax is rewriting
minmax(50px, min(1000px, 300px)) */
grid-template-columns: 100px minmax(50px, 1000px);
}
.no-minmax {
grid-template-columns: 100px max-content;
}
.a {
background-color: oklch(from tomato 90% c h);
}
.b {
background-color: oklch(from green 80% c h);
}
<h2>minmax(): clamp to grid container max-width</h2>
<code>grid-template-columns: 100px minmax(50px, 1000px);</code>
<div class="grid minmax">
<div class="a">The quick brown fox</div>
<div class="b">The quick brown fox jumps over the lazy dog!</div>
</div>
<h2>no minmax(): overflow container</h2>
<code>grid-template-columns: 100px max-content</code>
<div class="grid no-minmax">
<div class="a">The quick brown fox</div>
<div class="b">The quick brown fox jumps over the lazy dog!</div>
</div>
After playing around I noticed clamping behaviour so that minmax column never overflow, but again this is something I can't find explanation in the spec. Or I'm not understanding something.
Why is this happening?
I looked with google, here and consulted ChatGPT and I read minmax spec.