minmax(0, 1fr)需配合子项min-width: 0才生效，否则因默认min-width:auto而失效；溢出问题根源在轨道计算阶段，overflow:hidden须加在直接子项并配white-space:nowrap等；safari 14.1前存在解析bug，需特性检测降级。
minmax(0, 1fr)本身不会导致溢出，但单独用它会失效
很多人加了 minmax(0, 1fr) 发现内容还是撑开列宽，以为是写错了。其实它没坏——只是没被触发。浏览器看到 minmax(0, 1fr) 是愿意缩的，但网格直接子项默认有 min-width: auto（等价于内容最小宽度），它死顶着不缩，轨道就缩不动。结果就是：列宽被长 URL 或连续英文单词拉得歪七扭八，其他列被压缩甚至消失。
-
minmax(0, 1fr)必须和.grid > *上的min-width: 0配套使用，缺一不可 - 只改轨道定义不碰子项样式，90% 的“溢出”问题照旧
- 如果子项里还嵌了
display: flex或另一层grid，那它的直接子元素也得加min-width: 0，否则撑开会传导
overflow: hidden 加在 Grid 容器上基本没用
你给 .grid 加了 overflow: hidden 却看不到裁剪效果？不是属性写错，而是它根本没生效对象。撑破发生在轨道计算阶段：浏览器先按子项 min-content 拉宽列，此时内容还没“溢出”，只是让整个容器被动变宽了。所以 overflow: hidden 连裁剪的机会都没有。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 真正要加
overflow: hidden的地方是网格直接子项（比如.grid > .item），且必须配合min-width: 0和white-space: nowrap - 想让文字省略号生效，
text-overflow: ellipsis要和min-width: 0、white-space: nowrap、overflow: hidden、明确的width或max-width四者同时存在 - 图片、
<pre class="brush:php;toolbar:false;"></pre>、<table> 这类固有尺寸元素最容易漏掉 <code>min-width: 0Grid 容器没设 max-height 就别指望 overflow:auto 滚动
给 Grid 容器加了
overflow-y: auto却没滚动条？大概率是因为容器本身没高度约束。Grid 容器默认按内容伸展，即使写了overflow，也会无限撑高，滚动永远触发不了。- 必须加
max-height: 300px（或具体数值）才能让它成为滚动上下文 - 优先用
max-height而不是height，更适应响应式场景 - 若容器在 flex 或绝对定位上下文中，边界可能不明确，此时更要靠
max-height + minmax(0, 1fr)双保险
Safari 14.1 及更早版本对 minmax(0, 1fr) 解析不稳定
你在 Safari 14.1 测试时发现列宽忽大忽小、甚至完全不收缩？不是你代码写错，是 Safari 对
0作为minmax()第一个参数的解析有 bug。- 用
@supports (grid-template-columns: minmax(0, 1fr))做特性检测，老 Safari 里 fallback 到1fr或固定像素值 - 避免混用
minmax(0, 1fr) auto，auto列会抢走最小宽度，破坏比例 - 移动端嵌套布局中最容易翻车的地方，不是写不对
minmax，而是漏掉某一层该加min-width: 0的节点
- 必须加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
