先记住这个答案
min-content 与 max-content 都来自内容本身。前者是允许正常软换行后能缩到的最小固有尺寸；后者是尽量不软换行时需要的尺寸。把它们写在 grid-template-columns 中，浏览器会根据实际文字、字体、图片等内容计算列宽。它们不是“最小宽度 0”和“永远占满容器”的同义词。
min-content尽量利用合法断行点max-content倾向不发生软换行- 不可断内容会抬高两者下限
- 固有尺寸随文字、字体和图片变化
用一段标题理解两种尺寸
一段有空格的英文标题通常能在单词之间断行。min-content 列可能缩到容纳最长不可断片段的宽度，标题排成多行；max-content 列会倾向保留整段标题不软换行所需的宽度。中文、带连字符的词、设置了断行规则的文本会有不同断点，所以不要死记“最长单词”作为完整定义。
.compare {
display: grid;
grid-template-columns: min-content max-content;
gap: 16px;
}
/* 左列尽量收缩并换行，右列按不软换行的需要定宽 */若右列的内容所需宽度大于容器，max-content 不会自动改成 1fr 给它让路，页面可能横向溢出。若需求是“有空间就展开，没空间也别小于可读下限”，可考虑 minmax(min-content, 1fr) 或其他明确的尺寸策略，再检查项目自身是否有自动最小约束。
图片与不可断字符串的边界
没有断点的长 URL 可能让 min-content 也很宽，因为浏览器无法在合法位置将它切开。可以用 overflow-wrap: anywhere 增加断行机会。图片有固有尺寸，同样会影响内容尺寸；常给图片设 max-width: 100%，避免它把列或网格项目撑出布局。
轨道尺寸与实际绘制要分开。把列设成 min-content 后，内容仍可能因为显式最小宽、内边距或不换行规则而占更多空间。开发工具里看计算后的轨道线和项目盒，比只读 CSS 声明更能说明问题。
同一句标题在窄列和宽列里的差别最直观。min-content 允许在可断的词间尽量换行，轨道宽度接近最长不可断片段；max-content 按不发生软换行时需要的宽度计算。若标题含一个超长标识符，没有断点，两者就可能同样宽。文字换成不同字体或把断行策略设为 overflow-wrap: anywhere 后，固有尺寸会重新计算，所以它们描述的是内容与排版规则共同给出的尺寸，并非写死的像素值。
容易答错的地方
- 把
min-content说成零宽 - 它仍须容纳不可断的最小内容片段，可能相当宽。
- 以为
max-content会限制在容器内 - 它表达内容不软换行的需求，若空间不足，结果可以溢出容器。
面试官还会怎么问？
长 URL 为什么让 min-content 也很宽？
没有可用断行点时，最小固有尺寸仍需放下那段不可断内容。
字体变化会影响这两个值吗？
会。字形宽度、字号和换行机会都会改变内容固有尺寸。
什么时候不用 max-content？
窄屏不能容忍横向滚动、文字必须换行时，直接用它定列宽往往不合适。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。