Как отобразить полосу прокрутки в списке после определенного измерения?

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 примере здесь .

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