1fr撑开列宽是因子项min-content强制拉伸，需minmax(0, 1fr)配合子项min-width: 0才能收缩；文字截断还需white-space、overflow、text-overflow三者齐备；safari 14.1需降级用minmax(min-content, 1fr)。

为什么1fr会让Grid内容撑开列宽

浏览器把1fr理解为“等分剩余空间”，但它不设轨道最小宽度下限。遇到无空格长URL、JSON字段或默认white-space: normal的英文单词时，子项会按min-content（比如一个60字符无空格字符串）强行拉宽整列——此时你看到的不是“内容溢出”，而是“列被撑宽”，overflow: hidden根本没机会生效。

minmax(0, 1fr)必须配min-width: 0才起作用

minmax(0, 1fr)只是告诉轨道“可以缩到0”，但网格直接子元素默认有min-width: auto（等价于min-width: min-content），它会顶住不缩，导致轨道收缩失败。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须同时改两处：grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) + .grid > * { min-width: 0; }
• 嵌套Flex/Grid的直接子元素也要加min-width: 0，否则溢出会逐层传导
• 图片、<pre class="brush:php;toolbar:false;"></pre>、<table>等固有尺寸元素特别容易漏掉这步<h3>文字截断需要三者齐备</h3> <p>光有轨道收缩和<code>min-width: 0还不够，要让文字真正被裁剪，得在子项上显式控制渲染行为：
  • 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（三者缺一不可）
  • 多行截断：display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  • 自动换行：overflow-wrap: break-word; word-break: break-word;，同样依赖min-width: 0

  Safari 14.1及更早版本的兼容性陷阱

  Safari 14.1对minmax(0, 1fr)解析异常，可能让列宽归零或错乱。这不是bug，是规范实现差异。

  • 稳妥降级方案：minmax(min-content, 1fr) + 子项min-width: 0 + width: 100% + box-sizing: border-box
  • 特性检测写法：@supports (grid-template-columns: minmax(0, 1fr))) { ... }
  • 真正难的不是写对minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加”——Grid容器？某条grid-template-rows？还是某个grid-area的直接子元素？漏掉一层，溢出就还在那儿

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！