结论先行Flex 布局里 90% 的怪事来自三个默认值：min-width:auto、align-items: stretch 和溢出不裁剪。显式写掉它们，世界就清净了。
我排查 Flex 问题的时间加起来大概有两整天。最后总结出三条，现在写代码时会主动写上。
01min-width: auto
flex 子项默认 min-width: auto，意味着它不会缩到内容宽度以下。 所以一个长单词能把你精心设计的三栏布局顶开。
1.item {
2 flex: 1;
3 min-width: 0; /* 关键：允许收缩到 0，再靠 ellipsis 收尾 */
4 overflow: hidden;
5 text-overflow: ellipsis;
6 white-space: nowrap;
7}
02baseline 的默认对齐
align-items 的默认值是 stretch，但在有文本时表现得像 baseline， 于是高度不一致的两个卡片会「底部对不齐」。显式写 align-items: flex-start 或 stretch。
03overflow 一定要配
给滚动容器加 overflow: auto 时，别忘了父级也要 min-height: 0， 否则在嵌套 flex 里高度会被内容撑开，滚动条永远不出现。