两栏布局实现：侧边栏固定宽度技巧

• 根容器（如 或布局包裹层）没设高度来源：min-height: 100vh 或 height: 100%（且父级不能是 height: auto）
• Grid 容器自身没设 min-height: 100% 或 height: 100% —— 1fr 在垂直方向无参考基准时会退化
• 主内容区域写了 align-self: start 或继承了 align-items: start，删掉即可让它默认拉满高度

滚动行为异常：谁该滚，怎么滚

默认整个 Grid 容器一起滚动。若要侧边栏固定、仅主内容区域独立滚动，必须显式隔离：

• 给主内容区域（如
  ）加 overflow-y: auto 和明确高度约束，例如 height: calc(100vh - 60px)
• 侧边栏本身不要设 overflow，也别加 position: sticky —— Grid 已通过列轨道天然固定其位置
• 绝对不要给 Grid 容器设 overflow，否则会截断侧边栏或导致双滚动条
• 如果主内容内有长表格或图片，记得加 min-width: 0 防止它撑大整列，间接压缩 1fr 可分空间

真正容易被忽略的是：fr 的“剩余空间”计算会扣除 gap、固定列尺寸、以及所有列的 min-content（比如未折行长单词、无约束图片）。哪怕你写了 240px 1fr，只要主内容区有个 white-space: nowrap 的长字符串，它就可能把整行撑宽，让 1fr 实际可分空间变小——这不是 bug，是 fr 的设计逻辑。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《两栏布局实现：侧边栏固定宽度技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。