先记住这个答案
网格项目的 min-width 默认是 auto。在常见的单轨道场景中，自动最小宽度会参考内容最小尺寸；当项目中有长 URL、宽图或不换行代码时，这个下限可能传递给轨道，使写了 1fr 的列也不肯缩小。处理时先分清轨道是否被撑大，再决定用 minmax(0, 1fr) 放宽轨道下限，或用 min-width: 0 放宽项目下限。
- 网格项的自动最小尺寸可能来自内容
- 长串和大图容易撑开
1fr列 min-width: 0允许项目缩小- 轨道缩小后还要处理内部溢出
为什么正文挤走侧栏
典型页面是两列：正文 1fr，右栏 200px。正文里放进一行很长的代码后，右栏消失在可视区域外。1fr 分配自由空间时还受到自动最小尺寸约束，项目又保留了自己的内容最低宽度。两个约束叠在一起，页面整体就可能比容器宽。
.page {
display: grid;
grid-template-columns: minmax(0, 1fr) 200px;
gap: 16px;
}
.page main { min-width: 0; }
.page pre { max-width: 100%; overflow-x: auto; }
/* 正文列可收缩，代码区内部横向滚动 */这里 minmax(0, 1fr) 处理轨道，min-width: 0 处理网格项目，pre 的滚动处理代码内容。若文章是普通长单词，可改用 overflow-wrap: anywhere；若是图片，则常用 max-width: 100%。不要靠整页横向滚动掩盖本应局部处理的内容。
auto 不总等于 min-content
把 min-width: auto 简单等同于 min-content 会在边界情形答错。网格项目成为滚动容器时，自动最小值可归零；项目跨越多条弹性列轨时也有特殊规则。显式设置的宽度、纵横比和跨轨道方式同样可能影响自动最小值。因此说“默认可能受内容制约”准确，说“任何网格项的 auto 都等于内容宽度”就太绝对。
检查时打开开发工具，先看实际轨道宽度是否超过预期，再看项目计算后的 min-width，最后看哪一个子元素产生不可断宽度。修改一个层面后观察另一层面，才能避免把内容溢出误认为轨道溢出。
做两栏布局时，建议把轨道下限与项目下限分开实验。第一步把正文轨道改成 minmax(0, 1fr)，看网格线是否回到容器内；第二步给正文项目设 min-width: 0，看项目盒是否随轨道缩小；第三步处理长链接或代码块的断行、滚动。若第一步已解决轨道而最后一步没做，画面仍可能越界，只是越界发生在格子内部。
容易答错的地方
- 只给子元素设置
overflow: hidden - 这可能隐藏文字，却没有解释轨道为何被撑大。应先找到自动最小约束，再选择是否隐藏内容。
- 认为
min-width: 0会让内容自动换行 - 它允许项目盒变窄；不可断内容是否换行，仍取决于文本断行与溢出属性。
面试官还会怎么问？
overflow: auto 为什么有时也能让项目缩小？
滚动容器的自动最小尺寸规则不同，可避免保留内容的完整最小宽度；但它同时改变滚动行为。
只改 minmax(0, 1fr) 可以吗？
轨道能缩小，但项目或内部内容仍可能溢出；要看实际是哪一层约束。
图片把网格撑大时怎么处理？
先让轨道和项目可收缩，再给图片设置 max-width: 100% 等尺寸限制。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。