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

<div class="scrollable-list">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <!-- 更多项 -->
  </ul>
</div>

.scrollable-list {
  width: 300px; /* 设置固定宽度 */
  height: 200px; /* 设置固定高度 */
  overflow-y: auto; /* 当内容超出高度时显示垂直滚动条 */
}

.scrollable-list ul {
  list-style-type: none; /* 去掉默认的列表样式 */
  padding: 0;
  margin: 0;
}

.scrollable-list li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

/* 自定义滚动条样式 */
.scrollable-list::-webkit-scrollbar {
  width: 10px;
}

.scrollable-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scrollable-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.scrollable-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.scrollable-list {
  width: calc(300px - 10px); /* 减去滚动条宽度 */
  height: 200px;
  overflow-y: auto;
}