React项目中div旁持续显示滚动条，overflow:hidden无效求助

你遇到的是项目全局反复出现滚动条，且局部设置overflow:hidden无法解决的问题，结合提供的代码和截图，下面是具体的排查和解决步骤：

问题分析 #

滚动条持续出现且局部设置无效，大概率是全局样式未重置或布局元素尺寸计算异常导致的，常见诱因包括：

• 浏览器默认的body/html margin/padding未清除，造成视口外额外空间
• box-sizing未设置为border-box，元素的padding/border会额外增加尺寸导致溢出
• Flex布局中子元素的高度/宽度设置不当，拉伸父容器超出视口

具体解决方法 #

1. 重置全局基础样式 #

在你的global.scss中添加以下代码，从根源消除默认样式带来的溢出：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden; // 强制隐藏横向滚动条
}

• box-sizing: border-box确保元素的宽度/高度包含padding和border，避免尺寸计算错误
• 清除全局margin/padding，消除浏览器默认样式导致的额外空间
• 给html/body设置overflow-x: hidden，阻止全局横向滚动条

2. 修正ContactMe组件的布局样式 #

当前.contactMe未设置明确高度，.left的height:100%可能导致父容器被意外拉伸，修改.contactMe的SCSS：

.contactMe{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; // 用视口高度确保组件占满屏幕，避免内容不足或过多时的溢出
    width: 100%;
    overflow: hidden; // 确保组件内部元素不会溢出产生滚动条
}

3. 处理大字体的响应式溢出 #

.wrapper中的h1设置了5rem的大字体，在小屏幕下容易横向溢出，添加媒体查询优化：

.wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 2rem;
    
    h1{
        font-size: 5rem;
        // 小屏幕下缩小字体，避免横向溢出
        @media (max-width: 768px) {
            font-size: 2.5rem;
        }
    }
}

为什么之前的overflow:hidden无效？ #

你之前给局部父元素设置overflow:hidden没效果，是因为滚动条的根源在全局的html/body层级，而非当前组件的容器，所以必须从全局样式入手解决。

内容的提问来源于stack exchange，提问作者Omar Assouma