适应内容函数只接受一个参数，即最大值。设置了此属性的网格列/行仍将根据其内容占用所需的最小空间，但不会超过最大值。
参见本文：Becoming a CSS Grid Ninja!
您可以在解决案例的同时仍然使用基于百分比的最大值：

div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr fit-content(20%);
}

.container div {
  overflow: hidden; /* this needs to be set so that width respects fit-content */
}

<div class="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

<div class="container">
  <div>
    some content
  </div>
  <div></div>
</div>

您误解了minmax函数。它首先尝试应用最大值，当这不可能时，它应用最小值。
因此，要修复布局，您只需计算容器宽度的20%，使用max-width属性将其应用于网格项，并在grid-template-columns属性定义中使用auto来定义第二列。

div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr auto;
}

.container > :nth-child(2) {
  max-width: 60px; /* 20% x 300px */
}

<div class="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

<div class="container">
  <div>
    some content
  </div>
  <div></div>
</div>

更新：更灵活的解决方案是使用this answer中的fit-content函数。

您可能需要在容器本身上设置max-width，并将其列设置为auto。

div,
aside {
  border-style: solid;
}

#container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr auto;
}

aside {
  max-width: 60px; /* 60px is 20% of 300px*/
  /* max-width:20%; 20% of window's */
  font-size: 0;
  transition: 0.25s;
}

#container:hover aside {
  font-size: 1em;
}

<div id="container">
  <div>
    Hover it to see aside grow till 20% average width
  </div>
  <aside>lets give a try to resize it from content</aside>
</div>

使用夹具（）

grid-template-columns: clamp(350px, 40%, 500px) auto;

车轮钳取三个参数（最小、首选、最大）