CSS Grid minmax with auto as min

Question

我想要一个有两列的网格，其中最左边的列将根据其内容的宽度进行缩放，但不会超过网格宽度的33%。

然而，grid-template-columns: minmax(auto, 33%) auto似乎没有按预期工作。即使内容较小，最左边的列也始终为33%的宽度。

我可能误解了minmax应该实现的目标。有没有其他方法可以实现我想要做的事情？

.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>

Answer 1

使用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>