CSS的彈性布局（Flex）允許我們創建基于容器的靈活布局，使得容器中的元素能夠自適應屏幕大小。而且，我們還可以使用Flex來實現滾動條。

.container {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: 300px;
}

我們首先需要一個具有固定高度且允許滾動的容器。例如，上述代碼中的類名為container的div元素使用了max-height：300px，并允許y軸溢出。同時，該元素的樣式display：flex和flex-wrap：wrap設置容器的彈性布局。

.item {
flex-basis: calc(33.33% - 10px);
margin: 5px;
}

我們需要配置容器中的元素。在上述代碼中，我們為類名為item的元素設置了flex-basis屬性。該屬性允許我們指定每個元素在容器中占據的空間比例。例如，我們可以使用calc函數計算元素的寬度占據容器寬度的百分比，從而使得容器中的元素自適應其大小。而margin屬性則為元素設置外邊距，從而使得它們之間留有一定的空隙。

使用CSS的彈性布局實現滾動條不僅具有良好的可讀性，還可以使得我們的頁面更加動態和美觀，為我們帶來良好的用戶體驗。