css页面局部超出范围后展示滚动条并实现滚动效果

代码结构：

<template>
  <div class="popup">
    <div class="popup-content flex-v-left">
      <div class="top-section">
        <div class="P2">详细信息</div>
        <div class="closeBtn" @click="closeDetailPopup"></div>
      </div>
      <div class="divider-main"></div>
      <div class="main-section flex-h-top">
      <--此处省略核心代码-->
      </div>
    </div>
  </div>
</template>

先看结构，页面是一个弹窗，弹窗分上下两部分。上部分为top-section，中间一根分割线，下部分为main-section。
目的：当main-section区域不超出大小限制时；没有滚动条；当main-section区域超出大小限制时，希望有滚动条展示并实现滚动效果。

代码实现：

.main-section::-webkit-scrollbar {
  width: 6px;
  /* 设置滚动条宽度 */
}

.main-section::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  /* 设置滚动条颜色 */
  border-radius: 4px;
  /* 设置滚动条圆角 */
}

.main-section {
  overflow: auto;
}