flex子项不收缩的根本原因是浏览器默认min-width:auto锁死最小宽度，必须在直接子元素显式设置min-width:0（横向）或min-height:0（纵向），并配合flex-shrink:1、父容器明确宽度约束及text-overflow等配套规则才能生效。
flex子项不收缩？先看min-width: 0
Flex子项写了flex: 1或flex-shrink: 1却仍撑破父容器，根本原因不是flex没生效，而是浏览器对直接子元素隐式设置了min-width: auto——它把长URL、连续英文、图片固有宽当作“不可压缩底线”，直接封印了收缩能力。
必须显式覆盖：min-width: 0（水平布局）或min-height: 0（垂直布局），且只对直接子元素有效。嵌套flex容器里的子项也要单独加。
- 只加在需要收缩的子元素上，比如
.content，别加在父容器或深层嵌套里 -
min-width: 0本身不改变布局，只是“解锁开关”；搭配flex-shrink: 1才真正起效 - Firefox执行更严格，别依赖Chrome的“悄悄妥协”行为
父容器没设width或max-width，所有规则都白配
Flex子项再怎么设min-width: 0、overflow-wrap: break-word，只要父容器是width: auto（默认值），浏览器就认为空间无限，根本不会触发溢出逻辑——滚动条不出、省略号不显、换行不发生。
必须给父容器加明确宽度约束：
-
width: 100%（常用于响应式容器） -
max-width: 600px（固定最大宽度） -
inline-size: fit-content配合width: min(100%, 600px)（现代写法）
注意：min-width或height不能替代width/max-width来触发收缩边界。
text-overflow: ellipsis不生效？检查四件套是否齐备
只写overflow: hidden和text-overflow: ellipsis是不够的。这四个条件必须同时满足：
-
min-width: 0（已在子元素上设置） -
white-space: nowrap（必须写在含文本的元素自身，不能写父级） -
overflow: hidden（裁剪动作） -
display: block或inline-block（text-overflow仅对块级元素有效）
另外，该元素自身或父容器需有稳定宽度来源（如flex-basis、width、max-width），否则没有“可缩空间”，省略号永远不会触发。
想横向滚动？overflow-x: auto没反应的三个硬条件
overflow-x: auto不显示滚动条，大概率是因为容器没被“框住”。Flex容器默认width: auto，会随内容无限撑宽，根本不存在溢出。
必须同时满足：
- 父容器设显式
width或max-width（例如width: 100%） - 子元素设
flex-shrink: 0或flex: 0 0 auto（防止Flex自动压缩导致内容压扁） - 子元素内文本设
white-space: nowrap（否则提前换行，滚动需求消失）
注意：overflow: auto可能误触垂直滚动，优先用overflow-x: auto；如果子项是img或input等替换元素，还得额外加min-width: 0。
最易被忽略的是：这些规则只对第一层flex子项生效，嵌套结构里每一层flex容器的直接子项都要单独处理min-width: 0和宽度约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
