用 flex-grow 实现进度条自适应需父容器设 display: flex；进度条容器设 flex-grow: 1 和 min-width: 0；width 须由 js 动态设置或通过 css 变量配合 style.setproperty 更新；ie 兼容推荐 calc() 或 js 测量。
用 flex-grow 实现进度条容器自适应宽度，前提是父容器必须是 display: flex
直接给进度条容器设 flex-grow: 1 是最简方案，但它只在 Flex 容器中生效。常见错误是忘了给外层加 display: flex，结果 flex-grow 完全不生效，宽度卡死在内容宽或默认 0。
使用场景通常是：进度条左侧有固定文字（如“上传中…”），右侧有百分比数字，中间进度条要撑满剩余空间。
- 父容器必须设
display: flex，且推荐加上align-items: center垂直对齐 - 进度条容器设
flex-grow: 1，同时建议加min-width: 0防止内容溢出时被拉伸变形 - 避免给进度条容器设固定
width或max-width，否则会覆盖flex-grow行为
进度条内部 width 百分比值必须由 JS 动态更新，CSS 无法自动读取数据
CSS 本身不能从 HTML 属性或 JS 变量里读进度值，width: var(--progress) 这种写法需要你提前用 JS 注入 CSS 变量，不是“自动绑定”。很多人误以为加个 data-progress="65" 就能触发样式，其实不行。
典型错误现象：width: 65% 写死在 CSS 里，或者用属性选择器 [data-progress="65"] { width: 65% }——这种只能覆盖有限几个离散值，没法响应实时变化。
立即学习“前端免费学习笔记（深入）”；
- JS 中每次更新进度时，直接操作 DOM 元素的
style.width最直接：bar.style.width = progress + '%' - 如果要用 CSS 变量，得同步设置：
bar.style.setProperty('--progress', progress + '%')，再在 CSS 里写width: var(--progress) - 注意单位：CSS 中
width必须带%，变量值也得包含单位，否则无效
IE 不支持 flex-grow，但可用 width: calc() 降级兼容
IE10/11 支持 flexbox 但对 flex-grow 解析不稳定，尤其嵌套 flex 容器时容易塌陷。这时候改用 calc() 更可控。
假设左右两侧固定宽分别是 80px 和 40px，父容器宽度未知，进度条需占满中间：
bar {
width: calc(100% - 120px); /* 80 + 40 */
}这个方案的问题是左右内容宽度必须确定，不适合文字长度动态变化的场景（比如中文 vs 英文标签）。若必须兼容 IE 且文字不定长，就得用 JS 测量左右节点宽度再计算。
-
calc()在所有现代浏览器和 IE9+ 都可用，比flex-grow兼容性更好 - 如果左右内容用了
flex-shrink: 0，记得在 IE 中手动加flex: none，否则可能缩容 - 移动端 Safari 旧版本对
calc()里嵌套函数（如calc(100% - env(safe-area-inset-right))）支持差，简单减法更稳
别忽略 overflow: hidden 和 border-radius 的组合影响
进度条常带圆角，但若容器没设 overflow: hidden，进度条子元素超出时会露出来，圆角失效。这个细节在 flex 布局下特别容易被忽略，因为视觉上“好像没破”，实际滚动或缩放时会突然暴露。
另一个坑是：父容器设了 border-radius，但进度条内部色块没继承，导致边缘生硬。不要指望子元素自动裁切，必须显式控制。
- 进度条容器（即
flex-grow那层）必须设overflow: hidden - 内部进度色块推荐用
height: 100%+background-color，别用 border 或 box-shadow 模拟进度，渲染性能差且难对齐 - 如果父容器有 padding，要确认是否计入 flex 分配——通常建议 padding 加在外层，进度条容器内边距用 margin 或额外包裹层处理
flex-grow 的行为依赖父容器尺寸和兄弟元素，一旦涉及多层嵌套、百分比宽、min/max-width 限制，就容易出现“看起来该撑开却没动”的情况。真遇到卡住，先用浏览器 devtools 检查 computed 样式里的 flex-basis 和 flex-shrink 是否意外干预了生长逻辑。
