flex: 1起点非0而是内容最小宽度；子项超宽因默认min-width: auto锁死收缩，需显式设min-width: 0与flex: 1 1 0配合，并确保white-space、overflow等截断条件闭环。
flex: 1 的起点不是 0，而是内容最小宽度
写了 flex: 1，子项却比父容器还宽，不是 flex 失效，而是浏览器在分配空间前，先按内容固有尺寸（min-content）设了个“最低门槛”。哪怕 flex-basis: 0%，只要内容里有一长串 URL、未换行的代码块或一张没加 max-width: 100% 的图片，这个门槛就直接拉高到几百像素——flex-grow 只能从这一起点往上分剩余空间，根本压不下去。
常见现象：
- DevTools 里看到 Computed
width是 520px，但你只写了flex: 1和width: 200px - 三个并列子项都设了
flex: 1，但含长文本的那个明显更宽 - 移动端视口窄，一行文字直接撑破卡片边界
min-width: auto 是默认锁死收缩的开关
所有 Flex 子项默认带 min-width: auto（水平布局）或 min-height: auto（垂直布局）。这个 auto 不是“不限制”，而是“至少撑到内容最窄能显示的宽度”，比如一个 <img src="logo.png"> 原图宽 800px，它就死守 800px 不放，哪怕父容器只有 375px。
必须显式覆盖才能解锁收缩：
- 对 row 布局：加
min-width: 0到子项上（不是父容器） - 对 column 布局：若要控制内部文本溢出，仍需
min-width: 0（因为换行和省略号发生在行内轴） - 别写
min-width: unset或min-width: initial，它们不等价于0
flex: 1 1 0 比 flex: 1 更可靠
flex: 1 是 flex: 1 1 0% 的简写，而 0% 在某些场景（如父容器 width 为 auto）下计算不稳定。改用三值语法可切断歧义：
-
flex: 1 1 0→ 明确设flex-basis: 0（数值 0，非百分比），起点真正归零 - 配合
min-width: 0，双重压制内容初始宽度 - 避免混用
width：写了flex: 1 1 0后再写width: 200px，后者被跳过 - 如果子项是
<input>或<button></button>，还需加min-width: 0+height: auto防内置最小高度干扰
内容截断需要闭环条件，缺一不可
想让长文本显示省略号，光有 flex: 1 和 min-width: 0 远不够。必须同时满足：
- 子项有明确宽度来源（靠
flex: 1分配，或父容器设了width） -
white-space: nowrap（阻止换行） -
overflow: hidden（裁剪区域） -
text-overflow: ellipsis（渲染省略号）
漏掉任意一条，比如只在父容器加 overflow: hidden，子项内部文本依然会横向溢出——裁剪必须作用在实际发生溢出的元素上。
真正难的不是记住这四条，而是每次改完样式后，打开 DevTools 看一眼该子项的 Computed min-width 是不是 0、flex-basis 是不是 0px、width 是不是你预期的分配值。这些值不对，其他设置全是空转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
