Grid容器在Flex子项中撑破父容器，是因为Flex子项默认min-width: auto阻止收缩；需同时设置grid-template-columns为minmax(0, 1fr)、Grid容器加min-width: 0、内部需截断的子项也加min-width: 0。
Grid容器放在Flex子项里，为什么宽度会撑破父容器？
根本不是Grid自己“失控”，而是Flex子项默认min-width: auto锁死了收缩能力——哪怕你给Grid容器写了width: 100%或flex: 1，它内部的轨道仍按min-content计算最小宽度，长URL、未约束图片、white-space: nowrap都会直接把整个Flex子项顶宽，溢出悄无声息。
Flex子项里的Grid要真正收缩，必须同时满足三个条件
漏掉任一，overflow: hidden都只是摆设：
-
grid-template-columns不能只写1fr，得改成minmax(0, 1fr)（显式允许轨道缩到0） - Grid容器本身（即Flex的直接子项）必须加
min-width: 0（覆盖Flex默认的min-width: auto） - Grid内部需要截断/换行的子项（比如文字块、
img），也得单独加min-width: 0——嵌套不穿透，只作用于直系子项
常见踩坑点：Safari、嵌套Flex、图片和表格
这些场景下，上面三步还可能失效：
- Safari（尤其iOS 15及更早）对
min-width: 0解析不稳定，建议加!important，并确保配套overflow: hidden和text-overflow: ellipsis同级存在 - 如果Grid子项内部又用了
display: flex，那它的子元素还得再加一遍min-width: 0，否则撑开会传导下去 -
img必须配max-width: 100%，table得加table-layout: fixed，否则min-width: 0也压不住它们
调试时最该盯住的两个地方
别猜，直接看DevTools：
立即学习“前端免费学习笔记（深入）”；
- 在Computed面板里查Flex子项的
min-width值——只要显示auto，就说明某一层漏加了min-width: 0 - 查Grid容器的
grid-template-columns实际解析结果——旧版Safari可能把minmax(0, 1fr)降级成1fr，等于白写
min-width: 0像一把钥匙，必须插进每一层嵌套的锁孔里，且每把锁还要配对对应的overflow或word-break策略。少一个，整条链就断。 
