overflow-y: auto在grid两栏中不生效，根本原因是grid容器未为右侧区域提供可滚动的上下文；必须显式设置父容器高度（如height: 100vh）、右侧网格项高度约束（如height: 100%或min-height: 0），并正确定义grid-template-columns（如200px 1fr）。
为什么overflow-y: auto在Grid两栏里不生效
不是overflow-y写错了，而是Grid容器没给右侧区域“可滚动的上下文”。overflow-y必须配合明确的高度约束（height、max-height或min-height）才起作用；Grid本身只分配空间，不自动限高。常见现象是右侧内容直接撑开整个页面，滚动条压根不出现。
- 父容器（
.container）必须设height: 100vh或max-height: calc(100vh - 60px)这类显式高度 - 右侧网格项（
.right）不能只靠grid-column: 2占位，还得加height: 100%或min-height: 0（防Grid默认最小尺寸干扰） - 若右侧含弹性子元素（如嵌套
display: flex），它可能把高度撑满——此时需在子元素上也加min-height: 0
grid-template-columns写错会导致右侧无法滚动
写了display: grid但两列堆一起？大概率是漏了grid-template-columns。Grid不会自动猜你想要两栏，必须显式声明列宽分配方式。
- 左侧固定：用
200px（绝对值），别用20%或1fr——否则缩放时宽度浮动，固定语义就没了 - 右侧自适应：用
1fr，不是100%；100%会让它尝试占满整个父容器宽度，直接把左侧挤出视口 - 完整写法：
grid-template-columns: 200px 1fr；若要兼容老Safari（width: 100%
右侧滚动时左侧位置偏移的真正原因
不是position: sticky或fixed的问题，而是Grid轨道尺寸计算被内容反向影响。尤其当右侧有长单词、未换行URL或table时，Grid会优先满足内容宽度，导致左侧列实际宽度被压缩或错位。
- 右侧必须加
min-width: 0，否则Grid默认按内容最小宽度算，1fr就分不到空间 - 右侧含文本时，补
word-break: break-word和overflow-wrap: break-word - 右侧含
<table>：加<code>table-layout: fixed+width: 100%，否则表格列宽由内容决定，破坏Grid列宽约束 - 全局加
* { box-sizing: border-box }，避免padding/border偷偷吃掉右侧可用宽度 - 右侧只需垂直滚动：统一用
overflow: auto，它会在需要时只出Y轴滚动条 - 要强制显示Y轴滚动条且隐藏X轴：写
overflow-y: scroll; overflow-x: hidden，但必须确保X轴确实不会溢出（比如加white-space: nowrap前先确认内容可截断） - 若右侧有横向可拖动区域（如代码块），
overflow-x: auto比hidden更安全，避免重要内容被裁剪
overflow-y和overflow-x组合使用的隐藏规则
当同时设置overflow-y: auto和overflow-x: hidden时，如果overflow-x值为visible，浏览器会强制把overflow-y重置为auto——哪怕你写了scroll也没用。这是CSS规范行为，不是Bug。
右侧滚动区域的真实高度控制永远比视觉布局更关键——overflow-y只是开关，height和min-width: 0才是让它真正工作的扳机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
