text-overflow: ellipsis 生效需四条件：块级/inline-block、white-space: nowrap、overflow: hidden、可计算宽度；Flex 中须设 min-width: 0 防撑开，用 flex-shrink 控制截断优先级，inline-flex 替代 flex 解决滚动截断，滚动子项需 flex: 1 + overflow-y: auto。
子元素文本溢出但不显示省略号？检查三个必要条件
仅写 white-space: nowrap 和 overflow: hidden 是不够的。text-overflow: ellipsis 要生效，必须同时满足：元素是块级或 inline-block；white-space: nowrap；overflow: hidden；且该元素有**可计算的宽度限制**。在 Flex 布局中，“可计算宽度”通常来自 flex-basis、width 或父容器分配的剩余空间。
常见错误是给子项设了 flex: 1 却忘了加 min-width: 0——这会导致文本强行撑开容器，ellipsis 完全失效。
-
min-width: 0必须显式设置在 flex 子项上（尤其当它含长文本时） - 避免对文本容器使用
width: 100%（在 Flex 下可能与flex-basis冲突） - 若用 Tailwind，对应类是
min-w-0，不是w-full
Flex 容器里多个子项，怎么让次要内容先被截断？
默认所有子项收缩权重相同（flex-shrink: 1），导致标题、按钮、状态标签一起被压缩，UI 失控。关键不是“禁止收缩”，而是**控制收缩顺序**。
用 flex-shrink 设定相对优先级：flex-shrink: 9999 的元素会最先被压到最小宽度（比如按钮缩成图标），而 flex-shrink: 0 的主文本区域则完全不收缩，最后才触发 text-overflow: ellipsis。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 需截断的次要项（如操作按钮、标签徽章）：加
flex-shrink: 9999 - 需保护的主内容项（如标题、描述）：加
flex-shrink: 0 - 不要只依赖
flex: 1，它隐含flex-shrink: 1，会干扰优先级
父容器 overflow: auto，但滚动后内容被“切掉”？别用 display: flex
这是横向滚动列表中最隐蔽的坑：子项设了 white-space: nowrap，父容器有 overflow: auto，但滚动到右侧时文字消失——根本原因是子项用了 display: flex，使其表现为块级容器，强制占满父宽，内部文本实际溢出却无法被滚动机制捕获。
解法极简：把子项的 display: flex 换成 display: inline-flex。它保留全部 Flex 能力（align-items、gap 等），但宽度由内容决定，不再霸占整行。
- 务必移除子项上可能存在的
width: 100%、flex: 1或min-width: 0（它们会压制inline-flex的自适应行为） - 父容器保持
overflow: auto和明确的max-width（如max-width: 300px） - 若子项需垂直居中，继续用
align-items: center，inline-flex完全支持
子元素撑满父容器高度后内容溢出，怎么只让内容区滚动？
当父容器是 display: flex; flex-direction: column 且设了固定高度（如 height: 100vh），子项默认会被拉伸填满（align-items: stretch）。此时想让其中某个子项（如内容区）能滚动，不能只加 overflow-y: auto，还必须打破拉伸行为。
核心动作是：给该子项加 overflow 且值不为 visible，再配合 flex: 1。这样它既获得剩余空间，又放弃 stretch 行为，转而按内容高度收缩，超出部分才触发滚动。
- 父容器必须有明确高度约束（
height或max-height），否则flex: 1无意义 - 滚动子项要同时设
flex: 1和overflow-y: auto（缺一不可） - 若用 Tailwind，组合类是
flex-1 overflow-y-auto，不是h-full
flex-shrink 是否被默认值悄悄覆盖——这三个点最容易被跳过，但恰恰决定截断逻辑是否真正生效。 
