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

我有以下清单：

<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，我如何才能做到这一点

您可以在带有图标的垂直选项卡中查看上面的列表。示例。

类似的内容

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

---

你不能使用溢出-y:自动；高度：90px；关于UL元素？并将li的固定高度设置为30px？@Chris我实现了你的解决方案，但列表中的元素是水平的，但我需要保持垂直。我将UL的显示类型从flex更改为block，这就成功了。