flex 子元素被长内容撑破容器，加 min-width:0 解决

flex 子项的 min-width 默认是 auto，内容比容器宽时它宁可溢出也不收缩，于是把父容器顶破。给被撑开的子项加 min-width: 0 才会收缩。

纵向容器里对应属性是 min-height: 0，很多人只改横向，纵向照样溢出。

想判断是哪一层溢出，临时给各级容器加不同背景色，看被顶出去的是父还是子。

.row { display: flex; }
.row > .main { flex: 1 1 auto; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }