1. init scrollbar 尝试添加

src/views/pages/aside-panels/aside-panels.vue

 <template>
-    <div class="aside-panels-container">
+    <div class="aside-panels-container flex-fill d-flex flex-column">
         <el-menu
-            class="aside-menu"
+            class="aside-menu flex-fill"
             @select="changeMenu"
             @open="onOpenSub"
             @close="onCloseSub"
@@ -190,9 +190,12 @@
     @import "~@/css/variables.less";
     .aside-panels-container {
         width: 240px;
+        height: 100%;
+        border-right: 1px solid #e6e6e6;
 
         /deep/ .aside-menu {
             height: 100%;
+            border-right: 0px;
             background-color: #fff;
 
             .el-menu-item__header {

src/views/pages/main.vue

@@ -3,19 +3,23 @@
         <div class="flex-none">
             <CommonHeader></CommonHeader>
         </div>
-        <div class="d-flex flex-fill">
-            <AsidePanels class="flex-none"></AsidePanels>
-            <div
-                class="
-                    main-container
-                    flex-fill
-                    d-flex
-                    align-items-center
-                    justify-content-center
-                "
-            >
-                <router-view class="router-page flex-fill"></router-view>
-            </div>
+        <div class="root-contaniner d-flex flex-fill">
+            <el-scrollbar class="container-scrollbar-left">
+                <AsidePanels class="flex-none"></AsidePanels>
+            </el-scrollbar>
+            <el-scrollbar class="container-scrollbar-right">
+                <div
+                    class="
+                        main-container
+                        flex-fill
+                        d-flex
+                        align-items-center
+                        justify-content-center
+                    "
+                >
+                    <router-view class="router-page flex-fill"></router-view>
+                </div>
+            </el-scrollbar>
         </div>
     </div>
 </template>
@@ -35,7 +39,12 @@
         height: 100%;
         min-width: 1200px;
 
+        .root-contaniner {
+            height: 100%;
+        }
+
         .main-container {
+            height: 100%;
             background-color: #f5f6fa;
             padding: 24px;
 
@@ -46,4 +55,28 @@
             }
         }
     }
+
+    .container-scrollbar-right {
+        flex: 1 1 auto;
+        height: 100%;
+    }
+
+    .container-scrollbar-left,
+    .container-scrollbar-right {
+        display: flex;
+        flex-direction: column;
+
+        /deep/ .el-scrollbar__wrap {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            height: 100%;
+
+            .el-scrollbar__view {
+                //     display: flex;
+                //     flex-direction: column;
+                height: 100%;
+            }
+        }
+    }
 </style>