flex容器不干扰clamp()，但子元素若被flex-shrink压缩、父容器未撑满视口或嵌套过深，导致实际渲染宽度≠视口宽度，vw计算虽正确却“看起来不动”；根本原因是布局链断裂，非函数失效。
Flex 容器本身不干扰 clamp()，但子元素若没拿到视口宽度上下文，vw 就算对了也“看起来不动”——这不是函数失效，是布局链断了。
为什么 Flex 里 font-size: clamp() 突然不缩放了？
常见现象：导航栏或卡片标题写了 font-size: clamp(1rem, 2.5vw, 2rem)，拖动窗口时 computed 值完全不变。
根本原因不是 clamp() 写错了，而是该元素的「实际渲染宽度」被 Flex 压缩了：
- 父容器设了
max-width: 600px或overflow: hidden，子项宽度被锁死 - 子项用了默认
flex: 1 1 auto，在空间不足时被flex-shrink压到 200px，vw还按 1920px 算，但视觉上字体被挤在窄框里，缩放不可见 - 嵌套多层 Flex（比如 .nav > .item > .title），宽度继承链断裂，
.title的计算基准不再是视口
验证方法：用开发者工具选中元素 → 查看 Computed 面板 → 检查 width 是否随窗口变化；若 width 卡死，font-size 必然卡死。
clamp() 在 Flex 子项中怎么写才真正生效？
关键不是调 clamp() 参数，而是让子元素能“看到”视口。三条实操路径：
- 给 Flex 子项加
flex: 0 0 auto+min-width: 0，防止文本短时被过度压缩（尤其white-space: nowrap场景） - 把
clamp()移到 Flex 容器的**直接子元素**上，避免嵌套 Flex 导致宽度上下文丢失 - 若必须依赖父容器宽度（如侧边栏内文字），改用容器级控制：
width: clamp(240px, 20vw, 320px)，再让字体用em或无单位line-height自然跟随
Flex + clamp() 排版的单位陷阱
混用单位在弹性布局下更容易出问题，因为 Flex 本身就在动态分配空间：
- 绝对禁止：
clamp(1rem, 2em + 0.5vw, 2rem)——em继承父级font-size，而父级可能正被clamp()动态修改，结果不可控 - 慎用纯
vw：clamp(16px, 2.5vw, 32px)—— 小屏（320px）下2.5vw = 8px，低于最小值，直接锁死在 16px - 推荐写法：
font-size: 1.125rem; font-size: clamp(1.125rem, calc(0.875rem + 0.4vw), 1.75rem)—— 基础值兜底，calc()启动早、斜率平缓，320px 时约 1.125rem，1440px 时约 1.675rem
line-height 别套 clamp()，写成 line-height: 1.4（无单位）即可，浏览器自动按当前 font-size 计算，小屏不挤、大屏不空。
兼容性与 fallback 怎么处理？
Chrome 76+/Firefox 75+/Safari 13.1+ 原生支持，但 iOS 13.3 之前 Safari 有闪烁 bug；旧版 Edge（≤18）和 IE 完全忽略含 clamp() 的整条声明。
必须提供 fallback，且顺序不能错：
- fallback 写在前：
font-size: 1.25rem -
clamp()写在后：font-size: clamp(1rem, 0.75rem + 0.5vw, 1.5rem)
真正容易被忽略的是：Flex 容器若自身宽度不稳定（比如靠 fit-content 或未设 width），再套一层 clamp() 可能导致字体抖动——先稳住容器宽度，再谈流体排版。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
