为什么flex容器的孙元素设置overflow不生效且出现溢出？

问题原因 #

overflow属性生效的核心前提是：元素自身有明确的、不随内容拉伸的尺寸约束，如果元素宽度是被内部内容自动撑开的，那内容永远不会超出元素边界，overflow自然不会触发。你遇到的现象本质是Flex布局的默认min-width规则导致的：

1. 保留.container2时overflow不生效的逻辑

• 外层.container是Flex容器，它的直接子元素.container2属于Flex项目。Flex布局规定：Flex项目的默认min-width值为auto，含义是Flex项目的最小宽度不会小于其内部内容的最小宽度。
• 超长文本会把.container2的宽度直接撑到超过父级.container的max-width:300px，此时.container2的宽度和内部.child的内容宽度完全一致，.child自然不存在溢出场景，设置的overflow-x: hidden不会生效。

2. 移除.container2时overflow生效的逻辑

• 移除中间层后，.child直接成为.container的Flex项目。此时你给.child设置了overflow-x: hidden，而Flex布局同时规定：当Flex项目的overflow属性不为visible时，它的默认min-width会自动变为0。
• 此时.child的宽度不再被内部内容强制撑开，会遵守父级的max-width: 300px约束，内容超出300px时就会被overflow规则截断，表现符合预期。

保留中间层的解决方案 #

如果需要保留.container2，只要给中间层加上宽度约束即可，可选方案：

• 给.container2设置min-width: 0，打破默认的内容宽度限制，让它可以被压缩到父级的300px宽度内
• 给.container2设置width: 100%，明确约束它的宽度和父级一致
• 直接把overflow-x: hidden设置在.container2上，同时实现宽度约束和溢出截断

内容的提问来源于stack exchange，提问作者mdcq