html - 如何在特定维度后在列表中显示滚动条？

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，我该怎么做？

您可以在 带图标的垂直选项卡 示例中检查上面的列表 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;
}