2021-06-08

多层flex布局造成滚动条失效

前几天遇到一个问题，页面使用的是flex布局，当flex多层嵌套后想弄一个滚动条发现失效。

如图：绿色边框的盒子里边多个div进行flex布局。在左下的蓝色div中进行内容超出出现滚动条。但是发现使用overflow-x: hidden; overflow-y: auto;的时候完全不起作用，出现的状况是想要滚动的div中子元素会将显示滚动条的div高度撑大，而没有滚动条的效果。

.scrollDiv{
    flex: 1;
    width: 100%;
    height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
//设置滚动条样式
.scrollDiv::-webkit-scrollbar{
    width: 5px;
    border-radius: 7px;
    background: transparent;
    box-sizing: border-box;
}
.scrollDiv::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) inset;
}
.scrollDiv::-webkit-scrollbar-thumb{
    min-height: 80px;
    background-color: #a3c0ff;
    border-radius: 7px;
}
.scrollDiv::-webkit-scrollbar-corner {
    background: transparent;
}

在Flex布局中，有时我们内容的宽度和高度是可变的，无法确定下来，设置滚动条就有可能会失效。解决方法：

1. 知道当前元素的flex flow
   如果要设置水平（纵向）滚动条，那么父元素的flex-flow就要设置为row（column）
2. flex设置为1
3. 滚动方向的大小（宽度或者高度）设置为0，非滚动方向大小设置为100%或者固定的大小。

.parentY{
     displey:flex;
     flex-flow:column;
}
.child{
    flex:1;
    width:100%;
    height:0;
    overflow-x:hidden;
    overflow-y:auto;
}

出现上述问题的原因是我们flex嵌套层数太多，而解决办法是：

如果父元素大小不确定，会造成滚动条失效的问题，如果父元素也是不确定大小的，那么要保证嵌套的flex-flow全部一致，然后滚动方向的大小设置为0