一个由标签高度设置失效导致的bug

今天做项目时遇到一个很奇怪的问题，根据UI的设计图，要给每个标签点击时加上下划线，我这里用的是 boder-bottom，但是却没有出现该有的效果。

要实现的效果如下：

原本的代码如下：

<view class="section">
	<scroll-view scroll-x="true" class="scroll">
		<view class="lists">
	        <view class="item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view>
			<view class="item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">待付款</view>
			<view class="item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">待收货</view>
			<view class="item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">待评价</view>
		</view>
	</scroll-view>
</view>

.lists {
	display: flex;
	margin-top: 12rpx;
	height: 56rpx;
	line-height: 56rpx;
	justify-content: space-around;
}
.lists .item {
	height: 46rpx;
	line-height: 46rpx;
	color: #666;
	text-align: center;
	font-size: 28rpx;
}
.lists view.active {
	color: #30CAB2;
	border-bottom: 4rpx solid #30CAB2;
}

试着给标签加 border，结果上、左、右边框都正常显示，唯独下边框没有显示。

然后就想，是不是外层的元素的高度设置了超出隐藏，整体调整外层元素的高度，添加不同的背景色，发现其他的外层元素都正常，但是不管怎么调， .list 和 .item的高度都是那么大，确定了原来是.list的问题。

接下来考虑是不是flex布局造成的，于是去掉了所有内外层嵌套的布局相关的样式，只留下高度和背景色，发现.list的高度还是没有变化…

就挺奇怪的，没想到会在这么简单的高度问题上踩坑，百度了很多也无果，不过功夫不负有心人，经过一系列的尝试，最终还是解决了。

代码如下：

<view class="section">
	<scroll-view scroll-x="true" class="scroll">
		<view class="lists">
	      <view class="item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view>
			<view class="item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">待付款</view>
			<view class="item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">待收货</view>
			<view class="item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">待评价</view>
		</view>
    	<view class="lists" style="height:0"></view>
	</scroll-view>
</view>

我在 .list 列表下方又添加了一个空的 .list 标签，额，具体为什么这样做有效我也不太清楚…直接为新添加的.list 标签写 display:none; 不行，直接加一个空的text标签也不起作用…

由于本人技术能力有限，这里先把问题记录下来，有缘能看到这篇博客的同学如果有好的见解或想法，欢迎提出并参与讨论，后续如果我想到了这个问题的原因，会再来补充。