CSS 网格 minmax 与 auto 作为 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>