css 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">
		<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;
			}
		}

　　

转载于:https://www.cnblogs.com/qiu-freedom/p/10591117.html