diff --git a/web/src/components/CommonSidebarWrapper.tsx b/web/src/components/CommonSidebarWrapper.tsx
new file mode 100644
index 00000000..819b5866
--- /dev/null
+++ b/web/src/components/CommonSidebarWrapper.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface CommonSidebarProps {
+  ['data-tc-role']?: string;
+}
+export const CommonSidebarWrapper: React.FC<CommonSidebarProps> = React.memo(
+  (props) => {
+    return (
+      <div
+        className="h-full flex flex-col"
+        data-tc-role={props['data-tc-role']}
+      >
+        {props.children}
+      </div>
+    );
+  }
+);
+CommonSidebarWrapper.displayName = 'CommonSidebarWrapper';
diff --git a/web/src/routes/Main/Content/Group/Sidebar.tsx b/web/src/routes/Main/Content/Group/Sidebar.tsx
index 4c5c87f4..0baad1fe 100644
--- a/web/src/routes/Main/Content/Group/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Group/Sidebar.tsx
@@ -10,6 +10,7 @@ import { GroupHeader } from './GroupHeader';
 import { GroupSection } from '@/components/GroupSection';
 import { GroupPanelItem } from '@/components/GroupPanelItem';
 import { GroupTextPanelItem } from './TextPanelItem';
+import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
 
 interface GroupParams {
   groupId: string;
@@ -35,10 +36,10 @@ export const Sidebar: React.FC = React.memo(() => {
     );
 
   return (
-    <div data-tc-role="sidebar-group">
+    <CommonSidebarWrapper data-tc-role="sidebar-group">
       <GroupHeader groupId={groupId} />
 
-      <div className="p-2 space-y-1">
+      <div className="p-2 space-y-1 overflow-auto">
         {groupPanels
           .filter((panel) => !isValidStr(panel.parentId))
           .map((panel) =>
@@ -55,7 +56,7 @@ export const Sidebar: React.FC = React.memo(() => {
             )
           )}
       </div>
-    </div>
+    </CommonSidebarWrapper>
   );
 });
 Sidebar.displayName = 'Sidebar';
diff --git a/web/src/routes/Main/Content/Personal/Sidebar.tsx b/web/src/routes/Main/Content/Personal/Sidebar.tsx
index aca0a37b..7af19d6b 100644
--- a/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Personal/Sidebar.tsx
@@ -7,6 +7,7 @@ import { openModal } from '@/components/Modal';
 import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
 import { DevContainer } from '@/components/DevContainer';
 import { SectionHeader } from '@/components/SectionHeader';
+import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
 
 const SidebarSection: React.FC<{
   action: React.ReactNode;
@@ -32,10 +33,10 @@ export const PersonalSidebar: React.FC = React.memo(() => {
   const userInfo = useUserInfo();
 
   return (
-    <div data-tc-role="sidebar-personal">
+    <CommonSidebarWrapper data-tc-role="sidebar-personal">
       <SectionHeader>{userInfo?.nickname}</SectionHeader>
 
-      <div className="p-2">
+      <div className="p-2 overflow-auto">
         <SidebarItem
           name={t('好友')}
           icon={<Icon icon="mdi:account-multiple" />}
@@ -62,7 +63,7 @@ export const PersonalSidebar: React.FC = React.memo(() => {
           return <SidebarDMItem key={converse._id} converse={converse} />;
         })}
       </div>
-    </div>
+    </CommonSidebarWrapper>
   );
 });
 PersonalSidebar.displayName = 'PersonalSidebar';