想实现上面这样分栏，并且溢出滚动的效果。可是自己下面的代码只能得到横向滚动条。觉得出现这个情况觉得还蛮有意思的，特地记录一下。
<li v-for="(item,index) in sortsInfo" @click="tabToggle(index)">{{item.sortsName}}<i class="xmFont iconDArrow"></i><div class="sortsContent" v-if="index == tabNo"><div class="sortsItem"><p v-for="(itemlist,index) in item.sortList">{{itemlist}}</p></div><div class="sortsSure"><span>重置</span><span>确定</span></div></div></li>//css.sortsContent { width:100%;position:absolute;top:__(60px);left:0;color:$deep-gray;.sortsItem{width:100%;box-sizing:border-box;text-align:left;padding:__(20px);overflow:scroll; ???????????????????????columns:2;height:__(150px);}
解决方法是给分栏的内容加个外框。在这个包裹分栏内容的外框中设置columns,给外外框的父级设置overflow.
<li v-for="(item,index) in sortsInfo" @click="tabToggle(index)">{{item.sortsName}}<i class="xmFont iconDArrow"></i><div class="sortsContent" v-if="index == tabNo">
//设置overflow:scroll<div class="sortsItem">
//加外框设置,并设置样式column:2<div class="sortDeailWrap"><p v-for="(itemlist,index) in item.sortList">{{itemlist}}</p></div></div><div class="sortsSure"><span>重置</span><span>确定</span></div></div></li>//css.sortsContent { width:100%;position:absolute;top:__(60px);left:0;color:$deep-gray;.sortsItem{width:100%;box-sizing:border-box;text-align:left;padding:__(20px);overflow:scroll;height:__(150px);>div{columns:2;}}
css columns 与overflow结合的问题
原文地址：https://www.cnblogs.com/qiu-freedom/p/10591117.html