Using max-content inside min() function

Building a layout for a web app using grid, I have a sidebar that I want to be as wide as necessary to accomodate its content (so, max-content), BUT I don't want it to grow too large, say no more than 20% of the viewport (so, 20vw).

I thought I use something as simple as:

.page {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: min(max-content, 20vw) 1fr;
  grid-template-areas: "side main";
}

But Firefox informs me that grid-template-columns has an incorrect value and is therefore ignored. If I simply use:

  grid-template-columns: max-content 1fr;

Then it works, but I don't have the safeguard that I want to avoid too large a sidebar.

Are keywords such as min-content and max-content not allowed in CSS functions?

What would be another way of achieving my goal here?

It looks like you are looking for the fit-content() function:

// just a test button

button.onclick = function() {
  const sidebar = this.closest('.page').querySelector('.sidebar');
  if (this.classList.contains('active')) {
    sidebar.textContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, exercitationem?';
  } else {
    sidebar.textContent = 'Lorem ipsum';
  }
  this.classList.toggle('active');
}

* {
  margin: 0;
}

.page {
  display: grid;
  height: 100vh;
  grid-template-columns: fit-content(20%) 1fr;
}

.sidebar {
  background: yellow;
}

.main {
  background: blue;
}

<div class="page">
  <aside class="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, exercitationem?</aside>
  <main class="main">
    <button id="button">just a test button</button>
  </main>
</div>