diff --git a/src/design/index.less b/src/design/index.less
index a7c056bfa..0242ff715 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -23,8 +23,7 @@ body {
   position: relative;
   width: 100%;
   height: 100%;
-  overflow: visible;
-  overflow-x: hidden;
+  overflow: hidden;
 
   &.color-weak {
     filter: invert(80%);
diff --git a/src/layouts/default/content/index.vue b/src/layouts/default/content/index.vue
index 87144aafa..5edfc0d15 100644
--- a/src/layouts/default/content/index.vue
+++ b/src/layouts/default/content/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
-    <PageLayout />
+    <div :class="[prefixClsScroll]">
+      <PageLayout />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -13,6 +15,7 @@
   defineOptions({ name: 'LayoutContent' });
 
   const { prefixCls } = useDesign('layout-content');
+  const { prefixCls: prefixClsScroll } = useDesign('layout-content-scroll');
   const { getOpenPageLoading } = useTransitionSetting();
   const { getLayoutContentMode, getPageLoading } = useRootSetting();
 
@@ -20,11 +23,14 @@
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-content';
+  @prefix-cls-scroll: ~'@{namespace}-layout-content-scroll';
 
   .@{prefix-cls} {
-    position: relative;
-    flex: 1 1 auto;
+    flex-grow: 1;
+    width: 100%;
+    height: 0;
     min-height: 0;
+    overflow: auto;
 
     // begin: 下面这块代码 在我的项目打包后在比较宽的屏幕(2K 31 寸)有显示 bug 有偶发性 清缓存首次进入会出现 , 刷新就没了, 这里为什么要指定宽度 ?
     &.fixed {