From a43c13991b95fc88da4cefbf815a45221df5dfd1 Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Fri, 27 Sep 2024 01:00:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E9=A6=96=E9=A1=B5=E5=90=84?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=EF=BC=8C=E9=98=B2=E6=AD=A2=E5=BC=B9=E6=80=A7?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MainView.vue | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/MainView.vue b/src/components/MainView.vue
index 92dc751..019189d 100644
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@@ -3,26 +3,23 @@
     <div>
       compoent
     </div>
-    <div style="overflow-y: auto;overflow-x: none;">
-      <div ref="el2" style="display: flex;flex-direction: column;height: 500px;width: 100%;">
-        <div v-for="item in componentsList" :key="item.id" style="height: 30px;width: 250px;border: 1px solid red;">
+    <div style="overflow-y: auto; overflow-x: hidden; flex-grow: 0; flex-shrink: 0; flex-basis: 250px;">
+      <div ref="el2" style="display: flex; flex-direction: column; height: 500px; width: 100%;">
+        <div v-for="item in componentsList" :key="item.id" style="height: 30px; width: 250px; border: 1px solid red;">
           {{ item.name }}:{{ item.id }}
         </div>
-
       </div>
     </div>
-    <div>
+    <div style="flex-grow: 1; flex-shrink: 0; overflow-y: auto;">
       <div>
-        <div style="display: flex;flex-direction: row;width: 100%;">
-
-          <div v-if="list.length>0" class="flex justify-between">
-            <NestedFunction  v-model="list"></NestedFunction>
+        <div
+          style="display: flex; flex-direction: row; width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
+          <div class="flex justify-between">
+            <NestedFunction v-model="list"></NestedFunction>
             {{ list }}
           </div>
-
         </div>
-
-        <div style="width: 800px;height:500px">
+        <div style="width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
           动态渲染
           <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
           <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
@@ -35,7 +32,6 @@
     </div>
   </div>
 
-
 </template>
 
 <script setup lang="ts">