minmax()不能限制溢出内容，因其仅定义轨道尺寸范围，不控制内容渲染；真正起作用的是网格项的overflow、max-width、white-space等样式属性。
minmax() 为什么不能直接“限制”溢出内容
minmax() 的作用是定义轨道尺寸的弹性范围，不是裁剪或隐藏内容的开关。它只管网格线怎么分布，不管单元格里的文字、图片会不会撑破容器。常见错误是以为写个 minmax(100px, 200px) 就能防止内容溢出——结果发现文字照常换行失败、图片照样撑宽列、滚动条该出现还是出现。
真正起作用的是单元格自身的 CSS：比如 overflow、max-width、white-space 这些属性。网格轨道只是“划地”，内容怎么待在地里，得靠单元格自己约束。
-
minmax(min, max)中的max是轨道最大可伸展尺寸，但若内容强制更大（如固定宽图片），浏览器仍会扩大轨道（除非设了grid-template-columns: minmax(100px, 200px) / auto并配合grid-auto-columns: minmax(100px, 200px)） - 如果希望列宽严格卡死上限，得配合
grid-template-columns: minmax(100px, 200px)+ 父容器overflow-x: auto，否则溢出内容会把整个网格拖宽 - 响应式场景下，
minmax(0, 1fr)比minmax(auto, 1fr)更安全——前者允许轨道收缩到 0，后者可能因内容最小尺寸卡住不缩
Grid 溢出内容的实际拦截位置在哪
溢出控制不在 grid-template-columns，而在网格项（grid item）自身。你得在 .item 上动手：
- 文字溢出：用
white-space: nowrap+overflow: hidden+text-overflow: ellipsis（注意需设width或max-width） - 图片溢出：给
img加max-width: 100%+height: auto，否则它无视网格轨道宽度 - 整个单元格溢出：在网格项上设
overflow: auto或overflow: hidden，而不是在 grid 容器上——后者只会让整个网格区域滚动，不是单格独立处理
示例：
.grid { display: grid; grid-template-columns: minmax(200px, 1fr), minmax(200px, 1fr); }
.item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
minmax(0, 1fr) 和 minmax(auto, 1fr) 的关键区别
这个差异直接影响溢出是否可控。很多布局崩掉，就栽在这两个参数上。
-
minmax(auto, 1fr)：auto表示“按内容自然尺寸”，哪怕内容很长，这一轨也会尽量撑开——1fr只是上限，但内容优先；结果就是列宽失控，溢出变成全局问题 -
minmax(0, 1fr)：0允许轨道压缩到零，1fr再分配剩余空间；配合grid-auto-flow: column或合理overflow设置，才能让内容被截断而非撑裂布局 - Firefox 对
minmax(0, ...)支持更稳；Chrome 在某些嵌套 Grid 场景下对0解析略保守，建议加min-width: 0到网格项兜底
移动端 Grid 溢出最常漏掉的一件事
不是写错 minmax，而是忘了给网格容器加 width: 100% 或 max-width: 100%。尤其当父级有 padding 或 flex 布局时，Grid 容器默认可能超出视口，导致横向滚动无法触发，内容看似“消失”，其实是被切掉了。
- 检查
getComputedStyle(gridContainer).width是否大于window.innerWidth - 加一句
width: 100%或max-width: 100%到网格容器，比调minmax参数更立竿见影 - 如果用了
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))，务必确保外层没有固定宽或未重置的min-width
复杂点在于：溢出行为是网格容器、轨道定义、网格项样式、甚至祖先元素共同决定的，改其中一处常要同步动三处——minmax 只是拼图一角，别让它背锅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
