css:flex: 1; 和 calc() 的一个小区别

293 阅读1分钟

一、问题场景

  1. css布局时很多时候需要用到calc计算宽高,或者使用flex布局,大多数场景下作用一样。
  2. 但是使用了ListScroller组件时,使用flex布局的flex: 1;时,会出现样式的错乱,一时间竟找不到原因,如果换成calc去计算高度,那么就没问题

(1)当去掉containeroverflow: hidden;

image.png (2)当去掉listoverflow: hidden;

image.png

二、解决

  1. 给所有设置了flex: 1;的容器加上overflow: hidden;overflow: auto;
  2. 根据形成BFC的条件,用了其他方法将该容器设置为BFC,没有达到想要的效果,所以为什么设置overflow可以解决这个问题的原因未知,下次在使用flex: 1;时若有用到ListScroller的场景,记得加上overflow

image.png

三、ListScroller组件

juejin.cn/post/711322…