为什么 flex 子项设了 min-width: 0 还是会溢出
做前端布局时经常遇到一个反直觉的现象:父容器用了 display: flex,子项里放了一段长文本或者一个宽表格,明明给子项写了 min-width: 0,横向却依然溢出容器,甚至把整个页面撑出滚动条。这个问题在聊天列表、侧边栏、表格布局、代码块预览里特别常见。很多人只知道“flex 子项要加 min-width: 0 才能收缩”,却不清楚这条规则针对的是哪个元素、在什么条件下才生效,以及为什么给错层级的元素加 min-width 完全没用。要彻底解决,得先搞清楚 flex 的收缩机制、min-width: auto 的来源,以及 overflow、flex-shrink、white-spac...