flx：消息列表 超出内容加滚动条

src/views/message.vue

@@ -318,6 +318,8 @@ export default {
     margin-right: 10px;
   }
   .msgBox {
+    height: 100%;
+    overflow-y: scroll;
     .title {
       font-size: 15px;
     }

src/views/messageV2.vue

@@ -3,7 +3,7 @@
     <!-- :showR="true" -->
     <!-- <vhead :titleName="'消息中心'"></vhead> -->
     <div class="pageContainer">
-      <div class="pageDataContainer">
+      <div class="msgBox">
         <div class="searchBox whiteBlock">
           <el-form
             :inline="true"
@@ -283,7 +283,7 @@ export default {
   display: flex;
   align-items: center;
   height: 200px;
-  padding: 0 20px;
+  // padding: 0 20px;
   margin-bottom: 20px;
   position: relative;
   .el-icon-close {
@@ -309,6 +309,9 @@ export default {
     margin-right: 10px;
   }
   .msgBox {
+    max-height: 100%;
+    overflow-y: auto;
+    padding: 0 20px;
     .title {
       font-size: 15px;
     }
@@ -334,4 +337,33 @@ export default {
     color: #000;
   }
 }
+
+// 美化滚动条
+.msgBox::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+.msgBox::-webkit-scrollbar-track {
+  width: 6px;
+  background: rgba(#101F1C, 0.1);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+.msgBox::-webkit-scrollbar-thumb {
+  background-color: rgba(144,147,153,.5);
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+  transition: background-color .3s;
+  cursor: pointer;
+}
+
+.msgBox::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144,147,153,.3);
+}
 </style>