直接结论：必须在flex直接子元素上设min-width: 0（横向）或min-height: 0（纵向），配合flex-shrink: 1、overflow: hidden、white-space: nowrap、text-overflow: ellipsis及max-width: 100%等，才能真正防止内容撑破父容器。
直接结论：用 flex 容器 + flex-shrink: 1（默认已有）+ 显式控制子项的 min-width 或 min-height，才能真正防止内容撑破父容器。仅靠 flex: 1 或 flex-grow: 1 不够，它只管“放大”，不管“压缩”。
为什么 flex: 1 有时不缩容？
因为 flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写——看起来全能，但实际中常被内容尺寸劫持：
- 文本或图片等固有尺寸内容会优先占据自身
min-content宽度，flex-shrink默认虽为1，但浏览器仍会保护最小可读宽度（如单个英文单词不折行） - 若子项设置了
white-space: nowrap或min-width: 200px，flex-shrink就完全失效 -
flex-basis: 0让它从“零宽”开始拉伸，但没限制下限，一旦内容本身宽 > 父容器，就会溢出
必须加上的防御性 CSS 规则
在弹性子项上补这三条，才能真正“自适应且不越界”：
-
min-width: 0（对行内元素/文本容器尤其关键，解除浏览器默认的min-width: auto保护） -
overflow: hidden或text-overflow: ellipsis+white-space: nowrap（针对纯文本截断场景） -
max-width: 100%（对图片、iframe 等替换元素，防止其原始尺寸突破容器）
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.item {
flex: 1;
min-width: 0; /* 关键！否则文字不收缩 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
img {
max-width: 100%;
height: auto;
}
align-items: stretch 导致高度失控怎么办？
这是最常被忽略的“隐形溢出源”：当容器设了固定 height，而子项未设 height 且 align-items: stretch（默认值）时，子项会被强制拉满容器高度，可能把内部 padding/margin 撑开、甚至触发滚动条。
- 解决方法一：给子项加
align-self: flex-start（取消拉伸） - 解决方法二：容器改用
align-items: flex-start（全局生效） - 解决方法三：子项显式设
height: auto或max-height: 100%，再配合overflow: hidden
真正可靠的自适应，不是堆砌 flex 属性，而是主动约束内容的最小/最大边界。很多“Flex 布局失效”的案例，根源都在忘了 min-width: 0 这一行。
