Skip to content
文章目录

flex 1 overflow auto不生效

解决方案

  1. 保持 flex 容器原有设置
  2. 并同时设置 flex 容器的 min-height 或 min-width 为 0 (p.s. 在高版本浏览器中,将 height 或 width 设置为 0 也能实现同样的效果,但低版本浏览器就真变成高度或宽度为 0 了,因此推荐采用 min-height, min-width 方式)
  3. 如果不生效,则检查父容器,如果父容器也是 flex 1,且也未设置 min-height 或 min-width 为 0,则需要做第 2 步相同的设置
  4. 如果还是不生效,则需要继续向上检查父容器,直至设置生效为止

原因

推荐阅读:flex:1 及 flex 取值的理解

推荐阅读:flex-1 的元素,其高度被子元素撑开的原因及解决方案

设置 flex:1 元素的子元素无法设置超出隐藏,flex: 1;width: 0;的原理

Firefox 下 flex 元素 overflow 失效的原因和修复

如何解决 flex 文本溢出问题

深入理解 CSS 溢出 overflow

深入理解 BFC

flex:1,min-width: 0 保证内容不超出父盒子

采坑记录--父元素 flex:1,子元素 height:100% 无效问题!

一文搞懂 flex:0,1,auto,none