flex 兼容问题

components/modules-pc/chatBox/index.vue

 <!--
 <!--
  * @Author: your name
  * @Author: your name
  * @Date: 2020-09-14 16:53:49
  * @Date: 2020-09-14 16:53:49
- * @LastEditTime: 2020-10-15 09:42:52
+ * @LastEditTime: 2020-10-16 17:14:05
  * @LastEditors: Please set LastEditors
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @Description: In User Settings Edit
  * @FilePath: /consoles_program/Users/xiawei/gdy/web-live/components/modules-pc/chatBox/index.vue
  * @FilePath: /consoles_program/Users/xiawei/gdy/web-live/components/modules-pc/chatBox/index.vue
 -->
 -->
 <template>
 <template>
-  <div class="chat-box">
-    <div class="top-chat-list">
+  <div class="chat">
+    <div class="top-chat-box">
       <top-chat-list></top-chat-list>
       <top-chat-list></top-chat-list>
     </div>
     </div>
-    <div class="chat-list">
-      <chat-list></chat-list>
+    <div class="chat-box">
+      <div class="chat-box-list">
+        <chat-list></chat-list>
+      </div>
     </div>
     </div>
     <div class="chat-send">
     <div class="chat-send">
       <send-box></send-box>
       <send-box></send-box>
@@ -46,19 +48,26 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-.chat-box {
+.chat {
   position: relative;
   position: relative;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   height: 100%;
   height: 100%;
-  .top-chat-list {
+  .top-chat-box {
     flex: 0 0 auto;
     flex: 0 0 auto;
   }
   }
-  .chat-list {
+  .chat-box {
+    position: relative;
     flex: 1;
     flex: 1;
-    height: 100%;
+    height: 0;
     width: 100%;
     width: 100%;
-    overflow-y: auto;
+    .chat-box-list {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
   }
   .chat-send {
   .chat-send {
     flex: 0 0 auto;
     flex: 0 0 auto;