flex子元素width失效是因为flex-basis优先于width计算主轴尺寸，且flex-shrink:1会压缩空间；解决方法是使用flex: 0 0 200px或flex-basis配合flex-shrink: 0。
检查 computed 样式里 width 是否为 auto
浏览器开发者工具中看到的 width 值是 auto，基本就坐实了问题根源：flex 子项根本没进入 width 计算流程。这不是“没生效”，而是被 flex-basis 直接绕过了。只要父容器是 display: flex，子项默认按 flex: 0 1 auto 处理，其中 flex-basis: auto 优先级高于 width，且 flex-shrink: 1 会主动压缩。
确认父容器主轴宽度是否确定
flex-basis: 30% 或 width: 30% 在 flex 子项里失效，往往是因为父容器本身没有明确的主轴尺寸。比如：
-
display: inline-flex且无内容撑开 → 父容器width计算为0px，30% 就是 0px - 父容器浮动、绝对定位，或被
max-width+padding暗中截断 - 父容器是
flex但自身又嵌套在grid或table中，未继承明确宽度
用开发者工具看父容器的 Computed → width，如果不是你预期的像素值（如 400px 或 100%），那所有百分比基准都落空。
排查 min-width: auto 的隐式撑开
即使父容器宽度 OK，子项仍宽得离谱？大概率是 min-width: auto 在起作用——它强制元素至少撑到内容固有宽度，比如长 URL、连续英文、<img> 或中文标点串。现象包括：
- 写了
min-width: 150px，但实际宽度是 600px（因为里面有个https://...） -
overflow: hidden+text-overflow: ellipsis完全不触发 -
flex: 1项被挤得极窄，而另一项却撑满整行
解法不是删内容，而是显式切断这个默认兜底：min-width: 0。注意它必须加在需要截断/收缩的**同一元素**上，不能只加在父容器；若该元素内部还有 flex 容器，里面的文本容器也得再加一遍。
验证 flex 属性是否覆盖 width
写了 width: 200px 又写 flex: 1，等于白写。flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写，第三个值直接清空 width 的参与资格。常见误写：
-
.item { width: 200px; flex: 1; }→width被忽略 -
.item { width: 30%; flex: 1; }→ 百分比失去参照，且仍被flex-basis: 0%覆盖
想保留宽度意图，必须用三值语法：flex: 0 0 200px（固定宽）或 flex: 0 0 30%（但前提是父容器宽度已知）。过渡动画里更要注意：transition: width 无效，是因为起始值是 auto，无法插值；得配合 min-width: 1px 和确定的 width 值才能动起来。
真正容易被忽略的是：这些限制不是孤立存在的，而是层层嵌套在渲染链路里——从父容器宽度计算，到 flex-basis 解析，再到 min-width: auto 的兜底干预，最后才是 width 的机会。少一环，width 就永远没出场时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
