fix: scrollbar is obscured (#3331)

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%);

src/layouts/default/content/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
+    <div :class="[prefixClsScroll]">
       <PageLayout />
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
   import PageLayout from '@/layouts/page/index.vue';
@@ -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 {