CSS Grid minmax with auto as min

I'm wanting to have a grid with two columns where the leftmost column will scale based on the width of its content, but will not exceed 33% of the grid width.

However, it appears that grid-template-columns: minmax(auto, 33%) auto does not work as intended. The leftmost column is always at 33% width even if the content is smaller.

I'm probably misunderstanding what minmax is supposed to accomplish. Is there some other way to achieve what I'm trying to do?

.main {
  display: grid;
  grid-template-columns: minmax(auto, 33%) auto
}

.firstcol {
  background: lightgreen;
}

.secondcol {
  background: lightblue;
}

<div class="main">
  <div class="firstcol">Short text</div>
  <div class="secondcol">Some more text</div>
</div>
<hr />
<div class="main">
  <div class="firstcol">This text is wayyyyyy to long and it should be wrapped</div>
  <div class="secondcol">Some more text</div>
</div>

Solution

What about using grid-template-columns: fit-content(33%) 1fr

.main {
  display: grid;
  grid-template-columns: fit-content(33%) 1fr;
}

.firstcol {
  background: lightgreen;
}

.secondcol {
  background: lightblue;
}

<div class="main">
  <div class="firstcol">Short text</div>
  <div class="secondcol">Some more text</div>
</div>
<hr />
<div class="main">
  <div class="firstcol">This text is wayyyyyy to long and it should be wrapped</div>
  <div class="secondcol">Some more text</div>
</div>