Why minmax is clamping the value to max-container

46 views Asked by At

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.

0

There are 0 answers