React映射渲染Div向上溢出问题求助

问题描述 #

开发中间分屏的前端小应用，左侧通过React渲染对象数组生成多个Div。当数组长度为10时，期望全部元素渲染，内容填满屏幕后可向下滚动，默认显示首个元素。但当前存在以下问题：

• Div向上溢出，可见的第一个Div并非数组首个元素
• 无法向上滚动到前面的内容（比如无法看到Div 7之前的内容）
  需要纯CSS解决方案，不使用SCSS或额外Node/React包。

原代码 #

CSS部分 #

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 2em;
}

.left {
  left: 0;
  overflow: scroll;
}

.right {
  right: 0;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.block {
  padding: 1em;
  margin: 1em;
}

React组件部分 #

import React from "react";

const LeftComponent = (props) => {
  return (
    <div className="split left">
      <div className="centered">
        {props.myArr.map(({ id, name, dob}) => (
            <div
              onClick={(event) => props.handleClick(event, id)}
              key={id}
              className="block"
            >
              <p className="duty_text">
                {name} | {dob}
              </p>
          </div>
        ))}
      </div>
    </div>
  );
};
export default LeftComponent;

解决方案 #

问题根源在于.centered的绝对定位导致内容容器偏移，滚动容器无法正确识别内容高度。修改CSS如下：

修改后的CSS #

.split {
  height: 100vh; /* 用视口高度确保占满屏幕 */
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  box-sizing: border-box; /* 让padding包含在高度内，避免溢出 */
  padding-top: 2em;
}

.left {
  left: 0;
  overflow-y: auto; /* 仅垂直滚动，更精准 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中内容 */
}

.right {
  right: 0;
}

.centered {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 保持内容块水平居中 */
}

.block {
  padding: 1em;
  margin: 1em;
  width: 80%; /* 可选，让内容块更美观，不撑满整个宽度 */
}

组件结构无需修改 #

React组件代码保持原样即可，CSS的修改已经解决问题。

原理说明 #

1. 移除绝对定位偏移：原.centered的top:50% + transform会把内容容器向上推，导致顶部内容溢出视口，滚动容器无法捕捉到这部分溢出内容。改用flex布局后，内容正常流在滚动容器内。
2. 正确计算滚动容器高度：用100vh代替100%确保滚动容器占满视口高度，box-sizing: border-box让padding-top不会增加容器总高度，避免超出视口。
3. 精准滚动控制：overflow-y: auto仅在内容超出时显示垂直滚动条，交互更友好。
4. 保持内容居中：通过flex的align-items: center实现内容水平居中，替代原绝对定位的居中方式，同时不破坏滚动逻辑。

内容的提问来源于stack exchange，提问作者Fiach Oneill