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">