minmax() in Grid not working as expected – always using max value

July 11, 2023

Consider the following code:

<div className="grid grid-cols-[minmax(100px,300px)_auto] grid-rows-1">
<div className="bg-red-600">
  left leftleft left left left left left left left left left left left
  left left left left left left left left left left left left left left
  left left left left left left left left left left left left
</div>
<div>main content</div>
</div>

That works fine, the maximum width of the first column is 300px:

However, when reducing the content for the left div, it does not shrink in width (it only looks a little bit shorter due to not perfect screenshot)

<div className="grid grid-cols-[minmax(100px,300px)_auto] grid-rows-1">
 <div className="bg-red-600">left</div>   <--- shorter content now
 <div className="bg-yellow-600">main content</div>
</div>

What am I doing wrong?

>Solution :

Consider using fit-content() to clamp the grid column track to 300px. If you’d still like the 100px minimum column track size as implied by the first 100px argument in your original post, consider applying min-width: 100px via min-w-[100px] to the first element.

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="grid grid-cols-[fit-content(300px)_auto] grid-rows-1">
  <div class="bg-red-600">
    left leftleft left left left left left left left left left left left
    left left left left left left left left left left left left left left
    left left left left left left left left left left left left
  </div>
  <div>main content</div>
</div>

<div class="grid grid-cols-[fit-content(300px)_auto] grid-rows-1">
  <div class="bg-red-600">left</div>   <!--- shorter content now -->
  <div class="bg-yellow-600">main content</div>
</div>

<div class="grid grid-cols-[fit-content(300px)_auto] grid-rows-1">
  <div class="bg-red-600 min-w-[100px]">left</div>
  <div class="bg-yellow-600">main content</div>
</div>