设置 flex 后，长文件名仍把卡片撑破，问题可能来自子项默认的最小尺寸约束。
本文使用HTML5、CSS 与当时浏览器可支持的布局能力，示例为局部页面。页面表现由文档结构、布局规则和浏览器环境共同决定。本文以可核对的 DOM（文档对象模型）和样式计算为起点，不使用后续才普及的布局属性。
1. 从现象推到机制
Flexbox（弹性盒布局）沿主轴分配空间，但收缩还受最小尺寸和内容影响。长不可断文本可能形成较大的最小内容宽度。允许子项 min-width:0 后，再按业务选择换行或截断。
图中的四个节点分别表示可用空间、弹性分配、最小尺寸、展示策略。顺着实线检查输入如何变成输出，再沿虚线核对反馈条件。图示表达的是本文讨论的关系，不是实测曲线或现场截图。
2. 最小实现与输入条件
构造图标加长标题的一行布局，分别查看主轴、交叉轴和子项计算宽度。本文用 margin 处理间距，不依赖后续普及的 flex gap。
1
2
3
4
5
.row { display: flex; }
.title {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
将片段放进带 UTF-8 声明和 viewport 设置的演示页。使用开发者工具检查实际盒尺寸、计算样式与请求；多浏览器或移动端结论需要在相应环境重新验证。
3. 用对照区分原因
下表列出需要主动改变的条件。预期行为来自机制分析，复现时还需记录运行环境和原始输出，不能将预期当作已经测得的结果。
| 改变的条件 | 需要验证的行为 |
|---|---|
| 标题含很长连续字符 | 默认最小尺寸可能阻止收缩 |
| 显式 min-width 为零 | 允许在分配空间内收缩 |
| 只加省略号样式 | 不保证已具备必要裁剪条件 |
对照 1：标题含很长连续字符
默认最小尺寸可能阻止收缩。观察时记录子项最小宽度与内容宽度。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 2：显式 min-width 为零
允许在分配空间内收缩。观察时记录计算宽度与溢出范围。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 3：只加省略号样式
不保证已具备必要裁剪条件。观察时记录宽度约束和 white-space。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
4. 适用条件与取舍
浏览器支持差异需要实际验证。若业务要求完整显示内容，应优先换行或展开，不应把省略号当成数据完整展示。
一次正常运行只覆盖了这组输入。继续扩展前，应把上面的异常对照保留下来，尤其关注“只加省略号样式”这一分支。后续方案若改变了图中任意一处依赖，原来的判断就要重新验证，不能仅凭界面相似或返回值相同沿用结论。
