el-scrollbar滚动条不显示解决方法

记录贴，对自己遇到的问题做一个记录，刚接触前端1个月，有不对的地方希望各位大佬指出。

项目场景

因为用户需求，需要兼容谷歌、火狐、IE10的滚动条样式，其他组件只兼容谷歌，火狐与IE显示默认样式，样式不统一。使用el-scrollbar进行滚动条样式统一。

---

# 问题描述：

添加el-scrollbar标签，竖直滚动条没有显示
原部分代码如下：

<el-collapse-item title="区域选择" name="1" class="coll-1">
	<el-scrollbar style="height:60px;">
		<div>内容...</div>		
	</el-scrollbar>
</el-collapse-item>

.coll-1 .el-collapse-item__content {
    
    
	height: calc(80vh - 300px);
	overflow: auto;
}

---

原因分析：

通过在网上查询，学习el-scrollbar组件，分析以下几点可能造成的问题原因
1.可能文本高度没有达到设置的最大高度；el-scrollbar标签在达到设置的高度后，超出部分隐藏会出现滚动条。
2.使用了overflow: hidden。
3.使用了overflow: auto。
4.使用了max-height。
5.与其他组件冲突，如el-table组件

---

解决方案：

查了网上许多资料，通过F12定位和修改属性，发现第三种和第四种情况会造成滚动条不出现问题。 我遇到的原因是第三种、第四种、第五种原因，因为父级或本身使用了overflow: auto或者max-height，样式应该是冲突了，注释掉，滚动条显示了。