safari 14.1 及更早版本解析 minmax(0, 1fr) 异常，导致列宽不稳定；需用 @supports 检测并 fallback，同时在 grid 直接子项及嵌套 flex/grid 子项中统一设置 min-width: 0。
minmax(0, 1fr) 在 Safari 14.1 及更早版本中解析异常
你在 iOS 15 以下或 macOS Safari 14.1 测试时发现列宽忽大忽小、甚至完全不收缩，不是代码写错，是 Safari 对 minmax(0, 1fr) 中的 0 解析不稳定。它可能忽略 0，退化为 minmax(auto, 1fr)，导致长 URL 或连续英文单词直接撑开整列。
实操建议：
- 用
@supports (grid-template-columns: minmax(0, 1fr))做特性检测，老 Safari 里 fallback 到1fr或固定像素值 - 兼容 Safari 13–14 的稳妥写法是：
minmax(min-content, 1fr)+ 子项min-width: 0+width: 100% - 调试时打开 DevTools → Computed → 查看
grid-template-columns实际解析值，确认是否被降级
子项未设 min-width: 0 导致撑开传导到嵌套 Flex/Grid
移动端嵌套最常见翻车点：外层 Grid 加了 minmax(0, 1fr)，但子项内部用了 display: flex 或另一层 display: grid，而它的直接子元素没加 min-width: 0。撑开会逐层传导，最终表现为右侧“漏出”一段空白或文字。
必须同步处理的层级：
- Grid 容器的直接子元素（如
.grid > .item） - 若
.item是display: flex，则它的直接子元素（如.item > .content）也要加min-width: 0 - 图片、
<pre class="brush:php;toolbar:false;"></pre>、<table> 等固有尺寸元素最容易漏，需单独加固：<code>img { max-width: 100%; height: auto; }100vw遇到滚动条宽度引发视口级溢出用
width: 100vw做 Grid 容器宽时，若页面有垂直滚动条（通常 16px），100vw会包含滚动条宽度，导致容器实际比视口宽，子项随之撑出边界——这在移动端 Safari 尤其明显，且不会触发横向滚动条，只表现为内容“被切掉”或布局偏移。解决方式：
- 改用
width: 100%并确保父容器有明确宽度约束 - 或用
width: calc(100vw - var(--scrollbar-width, 0px))，配合 JS 检测滚动条宽度并注入 CSS 变量 - 更简单可靠的替代：给 Grid 容器加
max-width: 100%+overflow-x: hidden（注意 iOS Safari 对overflow-x: auto支持弱，需加-webkit-overflow-scrolling: touch）
文字截断三件套在 Safari 中缺一不可
在 Safari（尤其 iOS 15 及更早）中，
text-overflow: ellipsis经常不生效，不是属性写错，而是它对上下文极其敏感：必须同时满足min-width: 0、white-space: nowrap、overflow: hidden、明确的width或max-width四者，且不能被 scoped 样式或伪类组合干扰。容易踩的坑：
- Vue
<style scoped></style>中需用:deep(.grid-item)确保样式穿透到底层 DOM - React 中 styled-components 包裹的组件，样式必须落在真实
<div> 上，而非包装器组件<li>第三方 UI 库（如 Ant Design）的 <code>Card、Typography默认不带min-width: 0，得手动覆盖
真正难的不是写对
minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加min-width: 0”。漏掉任意一层，溢出就还在那儿，且在移动端往往表现得更隐蔽——没有滚动条、没有报错、只有内容错位或消失。 - 改用
