From 3f65baf503bee677bde70535525ae514d0585d69 Mon Sep 17 00:00:00 2001
From: xachary <179740385@qq.com>
Date: Fri, 24 Nov 2023 00:04:34 +0800
Subject: [PATCH] fix: scrollbar is obscured (#3331)

---
 src/design/index.less                 |  3 +--
 src/layouts/default/content/index.vue | 12 +++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/design/index.less b/src/design/index.less
index a7c056bf..0242ff71 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 87144aaf..5edfc0d1 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 {