外层必须设display: flex且作用于直接子元素，否则flex-grow无效；.progress-bar需flex-grow: 1+min-width: 0，左右文字容器加flex-shrink: 0，width由js动态设置或css变量注入并带单位。
Flex 嵌套实现自适应进度条，核心不是“多层 flex”，而是外层 flex 控制容器分配，内层靠 width 动态填充 —— 用错层级或混用 flex-grow 和 width 是最常见失效原因。
为什么外层设 display: flex 后进度条仍不撑满？
因为 flex 容器只对**直接子元素**生效。如果你写了：
<div class="progress-wrapper"> <span>上传中…</span> <div class="progress-bar"></div> <span>65%</span> </div>
却只给 .progress-bar 设了 flex-grow: 1，但没给 .progress-wrapper 加 display: flex，那它就只是普通块级容器，flex-grow 完全被忽略。
- 必须给父容器（如
.progress-wrapper）显式设置display: flex和align-items: center -
.progress-bar要加flex-grow: 1+min-width: 0（防文字溢出拉伸） - 左右两侧文字容器建议加
flex-shrink: 0，避免被压缩变形 - 别在
.progress-bar上写死width或max-width，否则会覆盖flex-grow
width 百分比该由 JS 还是 CSS 变量控制？
CSS 本身无法读取实时数据，width: var(--progress) 看似简洁，但变量值必须由 JS 注入，且单位不能丢 —— 写成 bar.style.setProperty('--progress', '65%') 才有效；如果漏掉 %，样式就失效。
- 最直白可靠的方式是直接操作 DOM：
bar.style.width = progress + '%' - 若用 CSS 变量，务必确保：变量值含单位、CSS 中
width用var()引用、JS 每次更新都调用setProperty - 禁止用属性选择器模拟动态效果，例如
[data-progress="65"] { width: 65% }—— 它只能匹配离散值，无法响应 65.3% 这类浮点进度 - 动画过渡要写在
.progress-bar上：transition: width 0.3s ease，别写在父容器
移动端缩放或字体变化时进度条错位怎么办？
根本问题在于：flex 分配依赖内容尺寸，而中英文、emoji、字号变化都会影响左右文字宽度，导致中间进度条计算偏移。此时 flex-grow 依然生效，但视觉上“不对齐”。
- 给左右文字容器加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，强制截断保宽 - 避免用
font-size: 1.2em这类相对单位做关键布局尺寸，改用rem或固定px控制文字容器高度/行高 - 如果必须响应字体缩放（如系统大字体模式），用
@media (prefers-reduced-motion)关闭动画，但保留width更新逻辑 - Safari iOS 15.4+ 对
flex-grow在transform: scale()容器内解析异常，遇到缩放 UI 时优先用calc()替代
真正难的不是让进度条“看起来动起来”，而是让它在各种文字长度、缩放级别、旧版 Safari 和强制配色模式下，依然保持左右对齐、不溢出、不塌陷 —— 这些边界情况，往往只在灰度发布时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
