flex:1未失效，而是其flex-basis:0%覆盖width、min-width:auto强制内容最小宽度、父容器无明确宽度、flex-shrink与内容冲突共同导致宽度失控。
不是 flex: 1 失效，而是它根本没打算“固定宽度”——它只负责按比例分剩余空间，而剩余空间常为 0，或被内容、最小宽度、父容器宽度缺失卡死。
flex: 1 为什么压根不认你写的 width
flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写。关键在后两项：flex-basis: 0% 直接清空你设的 width，flex-shrink: 1 还允许压缩。哪怕你同时写 width: 200px，浏览器也只当它是无效注释。
- 想保留
width效果，必须显式切断默认伸缩链：比如用flex: 0 0 200px - 百分比
width（如width: 30%）在flex: 1下完全失效，因为flex-basis已覆盖它 - 开发者工具里检查 computed 样式，会发现
width值存在但flex-basis和min-width才是真正起作用的
父容器没宽度，flex: 1 就是空转
Flex 子项伸缩的前提是父容器有明确主轴尺寸。如果父容器是 display: inline-flex、浮动、绝对定位，或没设 width/max-width，它的宽度就“飘着”，flex-basis: 0% 算出来还是 0，flex-grow: 1 拉无可拉。
- 用 DevTools 查看父容器的
Computed → width，确认是不是你预期的值（比如400px或100%） - 常见陷阱：
display: inline-flex默认不占满行，得加width: 100%或改用display: flex - 响应式场景下，
width: 100vw可能因滚动条宽度变化导致抖动，优先用width: 100%+ 父容器约束
内容撑开、min-width: auto 在暗中作梗
即使父容器宽度 OK，flex: 1 子项仍可能宽得离谱——尤其含长单词、图片、white-space: nowrap 时。min-width: auto（Flex 项默认值）会强制元素至少撑到内容固有宽度，flex-grow 拉不动，flex-shrink 又压不下去。
- 解决办法是显式写
min-width: 0，覆盖掉那个隐式的auto - 配合
overflow: hidden或text-overflow: ellipsis才能让长文本真正截断 - 别全局设
min-width: 0，只加在需要自适应的 flex 项上（按钮、输入框等控件会因此变形）
flex-basis: 0% 不等于真从零开始
flex-basis: 0% 的语义是“按 0% 容器宽起步”，但浏览器实际计算时会先取内容最小宽度（min-content），再和 0% 比较，取大者。所以一个带 500px 图片的子项，就算 flex-basis: 0%，起点也是 500px。
- 要真正从零起步均分，得配
min-width: 0+flex-basis: 0（注意是无单位的 0，不是 0%） - 若需保留内容可读性又不想失控，改用
flex: 0 0 auto+ 显式flex-basis: 30%，关掉 grow/shrink，让百分比落地 - IE10/11 不支持
flex-basis: 50%，得用calc(50% - 8px)或退到flex: 1均分逻辑
真正卡住 flex 宽度的，从来不是某一行 CSS 写错，而是四层约束叠在一起：父容器宽度是否确定、flex-basis 是否被内容劫持、min-width: auto 是否未覆盖、flex-shrink 是否在悄悄压缩。缺一不可查，少一个就白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
