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