一、问题场景
- css布局时很多时候需要用到calc计算宽高,或者使用flex布局,大多数场景下作用一样。
- 但是使用了
ListScroller组件时,使用flex布局的flex: 1;时,会出现样式的错乱,一时间竟找不到原因,如果换成calc去计算高度,那么就没问题
(1)当去掉container的overflow: hidden;
(2)当去掉
list的overflow: hidden;
二、解决
- 给所有设置了
flex: 1;的容器加上overflow: hidden;或overflow: auto; - 根据形成
BFC的条件,用了其他方法将该容器设置为BFC,没有达到想要的效果,所以为什么设置overflow可以解决这个问题的原因未知,下次在使用flex: 1;时若有用到ListScroller的场景,记得加上overflow