0

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: enter image description here

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>

enter image description here

What am I doing wrong?

stefan.at.kotlin
  • 15,347
  • 38
  • 147
  • 270

1 Answers1

2

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>
Wongjn
  • 8,544
  • 2
  • 8
  • 24
  • 1
    perfect, thank you! For other readers, I've misunderstood the minmax function: `It first tries to apply maximum value and when that's not possible, it applies minimum.` (from https://stackoverflow.com/questions/45459151/how-to-set-the-maximum-width-of-a-column-in-css-grid-layout) – stefan.at.kotlin Jul 11 '23 at 14:53