flex 1 overflow auto不生效
解决方案
- 保持 flex 容器原有设置
- 并同时设置 flex 容器的 min-height 或 min-width 为 0 (p.s. 在高版本浏览器中,将 height 或 width 设置为 0 也能实现同样的效果,但低版本浏览器就真变成高度或宽度为 0 了,因此推荐采用 min-height, min-width 方式)
- 如果不生效,则检查父容器,如果父容器也是 flex 1,且也未设置 min-height 或 min-width 为 0,则需要做第 2 步相同的设置
- 如果还是不生效,则需要继续向上检查父容器,直至设置生效为止
原因
推荐阅读:flex:1 及 flex 取值的理解
推荐阅读:flex-1 的元素,其高度被子元素撑开的原因及解决方案
设置 flex:1 元素的子元素无法设置超出隐藏,flex: 1;width: 0;的原理
Firefox 下 flex 元素 overflow 失效的原因和修复
flex:1,min-width: 0 保证内容不超出父盒子