CSS Grid布局：如何让侧边栏自适应内容且宽度不超20vw？

关于max-content能否用于CSS函数的疑问 #

早期CSS的min()/max()数学函数仅接受数值类型参数，不支持max-content/min-content这类长度关键字，这也是旧版Firefox报错的原因。新版CSS规范已允许在数学函数中使用这些关键字，但兼容性仍有差异，部分旧浏览器（包括部分Firefox版本）暂未支持。

实现需求的可行方案 #

方案1：给侧边栏单独设置宽度上限（兼容性最好）

在Grid布局中保留max-content实现内容自适应，同时给侧边栏元素添加max-width限制：

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

.sidebar {
  grid-area: side;
  max-width: 20vw;
  overflow-x: auto; /* 可选：内容超出上限时显示滚动条，避免布局错乱 */
}

这种方式逻辑清晰，所有支持Grid的浏览器都能正常工作。

方案2：使用fit-content()函数（推荐，更简洁）

fit-content(<length-percentage>)是专门为这类场景设计的CSS函数，它会自动取内容宽度和指定上限值中的较小值，完美匹配你的需求：

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

该函数兼容性良好，包括Firefox在内的主流浏览器都已支持，代码更简洁，无需额外给侧边栏添加样式。

内容的提问来源于stack exchange，提问作者s427