flex-grow仅适用于单段填充+固定箭头的简单进度条；多步、箭头咬合或响应式场景下，其动态宽度与箭头所需的绝对像素偏移冲突，导致错位、断开或文字撑爆。
直接说结论：用 flex-grow 实现带箭头的进度条，只适用于「单段填充 + 固定箭头方向」的简单场景；一旦涉及多步骤、箭头咬合或响应式缩放，flex-grow 会和伪元素/clip-path 冲突，导致箭头错位、断开或文字撑爆容器。
为什么 flex-grow 不适合做带箭头的多步进度条
核心问题不是 flex-grow 本身，而是它和箭头实现方式的底层逻辑冲突：
-
flex-grow是按剩余空间比例分配宽度，但箭头（无论是::before/::after还是clip-path）依赖的是**绝对像素偏移**或**固定几何切割点** - 当父容器宽度变化时，
flex-grow: 1的子项宽度动态变，但border-left: 20px solid或calc(100% - 20px)里的20px不会跟着缩放 → 箭头尖角立刻撕裂 - 多步骤下每个节点都要独立控制「自身右箭头」和「右侧节点左箭头」的衔接，
flex-grow只管宽度，不管边缘形状
哪些场景下 flex-grow + 箭头能凑合用
仅限极简单步进度条，比如「上传中」状态条，右侧带一个静态右向箭头：
- 外层容器设
display: flex，只含两个子元素：.progress-fill和.arrow -
.progress-fill设flex-grow: 1; min-width: 0;，靠 JS 动态改width或 CSS 变量驱动 -
.arrow设flex-shrink: 0; width: 24px;，用border或clip-path画固定尺寸箭头 - 禁用
white-space: nowrap，否则文字内容会强制撑宽.progress-fill，破坏flex-grow分配
常见错误：把 flex-grow 和 width 混着用
这是最典型的失效操作——既给元素设 flex-grow: 1，又手动写 width: 60%：
立即学习“前端免费学习笔记（深入）”；
-
width会覆盖flex-grow的计算结果，导致实际不伸缩 - 如果同时设
min-width和width，浏览器优先按width渲染，flex-grow形同虚设 - 想动态控制进度？别碰
width，改用transform: scaleX()（性能更好）或 CSS 变量 +calc()
真正可控的替代方案
如果你需要箭头无缝、多步可扩展、缩放不撕裂，放弃 flex-grow 驱动箭头，转而用：
- Grid +
clip-path: polygon()：每个步骤块自己切出斜边，不依赖相邻元素宽度 - Flex 布局只负责「等分容器」，箭头用绝对定位伪元素 +
transform: translateX()居中连线，和flex-grow解耦 - 所有像素值（如
20px箭头宽）统一抽成 CSS 变量，缩放时用scale()包裹整个进度条容器，而非单个步骤
复杂点在于，箭头不是“画上去”的装饰，而是步骤块自身形态的一部分——你得先定义好每个块的视觉边界，再让布局系统去适配它，而不是反过来。
