flex:1撑破容器主因是默认min-width:auto阻止收缩，必须显式设min-width:0（横向）或min-height:0（纵向），并配合box-sizing:border-box和overflow控制才能生效。
flex:1 为什么会让内容撑破容器
因为 flex:1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，关键在 flex-basis: 0% —— 它让浏览器把项目初始尺寸当作“0”，再分配剩余空间。但一旦内容本身（比如长文本、图片、未约束的 input）有固有尺寸，Flex 就会优先满足内容渲染，而不是守着“剩余空间”边界，结果就是溢出。
必须加 min-width: 0 或 min-height: 0
这是最常被漏掉的修复点。Flex 项目默认 min-width: auto（行内元素）或 min-height: auto（块级），这会阻止收缩，哪怕 flex-shrink: 1 也无效。
- 横向溢出（主轴为 row）→ 给子项加
min-width: 0 - 纵向溢出（主轴为 column，如
flex:1在垂直布局中）→ 加min-height: 0 - 如果子项含图片、
iframe、textarea等替换元素，这个设置尤其必要
box-sizing: border-box 不是可选项，是前提
Flex 子项若设了 padding 或 border，又没显式声明 box-sizing: border-box，那它的基础尺寸仍按 content-box 计算：先分宽度，再额外加 padding 和 border，必然超限。
- 不能只依赖全局重置，第三方 UI 库（如 Ant Design、Element Plus）可能覆盖它
- 务必在 DevTools 的「Computed」面板里确认值确实是
border-box - 搭配
min-width: 0使用才真正生效
overflow: hidden 要和尺寸限制一起用才起作用
overflow: hidden 单独写在 Flex 子项上基本无效——它只裁剪内容，不约束主轴占用宽度；而 Flex 子项默认不是 BFC，裁剪逻辑也不触发。
立即学习“前端免费学习笔记（深入）”；
- 正确组合：
flex: 1; min-height: 0; overflow: hidden;（纵向场景） - 文字截断需额外加：
white-space: nowrap; text-overflow: ellipsis; - 想让整个容器横向滚动？
overflow-x: auto必须设在 Flex 容器上，不是子项
min-width/min-height 是否被覆盖，再确认 box-sizing 生效，最后看 overflow 是否落在了正确的元素层级上。三者缺一，都可能让 flex:1 变成“flex:oops”。 
