一定尺寸后如何在列表中显示滚动条？

Question

我有这个列表：

<div class="col-lg-3 col-md-6">
 <ul class="nav nav-pills nav-pills-primary nav-pills-icons flex-column">
   <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#link10">
      <i class="tim-icons icon-istanbul"></i> Home
      </a>
   </li>
   <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#link11">
      <i class="tim-icons icon-settings"></i> Settings
      </a>
   </li>
 </ul>
</div>

当列表达到特定数量的项目时，我想显示一个滚动条，例如：3，我该怎么做？

您可以在Vertical Tabs With Icons示例here中查看上面的列表。

Answer 1

类似这样的东西

.nav {
    display: block;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    height: 360px;
    width: 150px;
    overflow-y: auto;
}
ol li, ul li {
    color: #fff;
    height: 118px;
}