CSS Grid布局适配问题：侧边栏无法按优先级收缩至200px

问题分析 #

原代码无法让aside收缩到200px的核心原因有两个：

1. grid-template-columns中minmax(0, 100%)的写法错误，100%会让main直接占满容器宽度，且main默认的min-width: auto会被内部不换行的标题撑开，导致aside没有收缩空间。
2. 未给main设置min-width: 0，无法打破内容撑开的最小宽度限制，导致main无法被压缩，进而aside的收缩逻辑无法触发。

修正后的代码 #

#grid-wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
  grid-template-areas: 'area-main area-aside';
}

main {
  grid-area: area-main;
  background-color: #1abc9c;
  padding: 1rem;
  min-width: 0; /* 关键：允许main收缩 */
}

main h1 {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%; /* 确保标题宽度受限于main容器 */
}

aside {
  grid-area: area-aside;
  background-color: #2980b9;
  padding: 1rem;
}

逻辑说明 #

• 大屏场景：aside自动取最大宽度300px，main通过1fr占据容器剩余所有空间，满足整体水平填满的要求。
• 空间不足时：
  1. 首先aside从300px向200px收缩，直到达到最小宽度200px。
  2. 若aside收缩到200px后仍无法容纳main的标题，main开始收缩，此时h1的text-overflow: ellipsis生效，标题显示省略号。

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