搜索记录超出滚动

components/i/Aside.vue

 <template>
-    <div class="flex-grow bg-gray-100 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800">
-        <div class="p-4 flex flex-col">
+    <div class="flex-grow overflow-hidden bg-gray-100 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800">
+        <div class="p-4 h-full flex flex-col">
             <ILogo class="mt-2" />
             <UButton
                 class="flex w-full mt-6"
@@ -17,7 +17,7 @@
                     </div>
                 </div>
             </UButton>
-            <div class="mt-4">
+            <div class="flex flex-grow overflow-hidden mt-4">
                 <INav />
             </div>
         </div>

components/i/Nav.vue

 <template>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col w-full gap-2">
         <UButton
             leading-icon="i-heroicons-home"
             color="gray"

components/i/SearchHistory.vue

 <template>
-    <div class="flex justify-between">
-        <UButton
-            class="flex-grow"
-            leading-icon="i-heroicons-magnifying-glass"
-            color="gray"
-            variant="ghost"
-            size="md"
-            label="搜索记录"
-            @click="handleOpen"
-        />
-        <UButton
-            v-if="$isSignIn"
-            label="清空"
-            size="md"
-            variant="link"
-            @click="handleClear"
-        />
-    </div>
-    <div v-if="$isSignIn" class="flex flex-col gap-2 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
-        <template v-for="(item, index) in $searchHistory" :key="index">
+    <div class="flex flex-col overflow-hidden">
+        <div class="flex justify-between">
             <UButton
-                class="flex group"
+                class="flex-grow"
+                leading-icon="i-heroicons-magnifying-glass"
                 color="gray"
                 variant="ghost"
-                size="xs"
-                long
-                :to="`/search/${item.c_id}`"
-                @click="handleClickItem"
-            >
-                <div class="flex-grow truncate">{{ item.title }}</div>
+                size="md"
+                label="搜索记录"
+                @click="handleOpen"
+            />
+            <UButton
+                v-if="$isSignIn"
+                label="清空"
+                size="md"
+                variant="link"
+                @click="handleClear"
+            />
+        </div>
+        <div v-if="$isSignIn" class="flex overflow-y-auto flex-col gap-2 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
+            <template v-for="(item, index) in $searchHistory" :key="index">
                 <UButton
-                    class="hidden group-hover:flex"
-                    color="red"
+                    class="flex group"
+                    color="gray"
                     variant="ghost"
                     size="xs"
-                    :padded="false"
-                    leading-icon="i-heroicons-x-mark-20-solid"
-                    @click.stop.prevent="handleRemoveRecordItem(item.c_id)"
-                />
-            </UButton>
-        </template>
+                    long
+                    :to="`/search/${item.c_id}`"
+                    @click="handleClickItem"
+                >
+                    <div class="flex-grow truncate">{{ item.title }}</div>
+                    <UButton
+                        class="hidden group-hover:flex"
+                        color="red"
+                        variant="ghost"
+                        size="xs"
+                        :padded="false"
+                        leading-icon="i-heroicons-x-mark-20-solid"
+                        @click.stop.prevent="handleRemoveRecordItem(item.c_id)"
+                    />
+                </UButton>
+            </template>
+        </div>
     </div>
     <UModal v-model="isOpenHistory" :ui="{ width: 'w-full sm:max-w-screen-md' }">
         <div class="flex items-center p-2">

layouts/default.vue

 <template>
     <div class="flex min-h-screen">
-        <div class="fixed top-0 w-64 hidden md:flex flex-col min-h-screen">
+        <div class="fixed top-0 w-64 hidden md:flex flex-col h-screen">
             <IAside />
         </div>
         <div class="w-full ml-0 md:ml-64 bg-white dark:bg-black flex flex-grow">