React父子组件CSS布局异常求助：展开子元素后布局错位

问题现象 #

• 点击子元素展开后，其父元素的对齐方式发生偏移
• 新生成的子元素容器超出页面范围，无法完全显示

问题根源 #

1. 子元素容器使用display: flex但未设置flex-wrap: wrap，子元素过多时直接撑破容器，导致父元素布局偏移
2. 节点容器使用固定宽度250px，未做响应式适配，小屏设备下直接溢出页面
3. 嵌套的Chart组件外层容器设置了align-items: center，子元素展开后高度变化会带动父元素垂直偏移
4. 节点内部元素全部使用绝对定位，脱离文档流，导致容器高度计算异常

修复方案 #

以下是修改后的代码，已适配全设备：

1. 全局样式（style.css） #

.App {
  min-height: 100vh;
  overflow-x: auto;
  padding: 20px 0;
}

.node-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.children-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 60px;
  width: 100%;
}

2. 修改后的Chart组件 #

import React, { useState } from "react";

export default function Chart({ item, expanded, onExpandChange }) {
  const [expandedChild, setExpandedChild] = useState();

  return (
    <div className="node-container">
      {item.name && (
        <div
          className="node-card"
          style={{
            backgroundColor: "rgb(246,246,246)",
            fontSize: "12px",
            width: "90%",
            maxWidth: "250px",
            minHeight: "85px",
            border: "1px solid grey",
            borderRadius: "25px",
            padding: "50px 20px 20px",
            position: "relative",
            boxSizing: "border-box",
          }}
        >
          <img
            src={item.image}
            alt={item.name}
            style={{
              border: "2px solid grey",
              borderRadius: "50%",
              height: "80px",
              width: "80px",
              position: "absolute",
              top: "-40px",
              left: "50%",
              transform: "translateX(-50%)",
            }}
          />
          <a
            href="/"
            alt=""
            style={{
              position: "absolute",
              right: "15px",
              top: "10px",
              textDecoration: "none",
              color: "darkgrey",
            }}
          >
            <b>...</b>
          </a>
          <div style={{ textAlign: "center" }}>
            <h3 style={{ margin: "0 0 5px" }}>{item.name}</h3>
            <p style={{ margin: "0" }}>{item.designation}</p>
          </div>
          {onExpandChange && item.child?.length && (
            <button
              onClick={onExpandChange}
              style={{
                position: "absolute",
                bottom: "10px",
                left: "50%",
                transform: "translateX(-50%)",
                borderColor: "grey",
                background: "white",
                borderRadius: "4px",
                cursor: "pointer",
              }}
            >
              {item.child?.length} {expanded ? "↑" : "↓"}
            </button>
          )}
        </div>
      )}

      {expanded && item.child?.length > 0 && (
        <div className="children-container">
          {item.child.map((childItem, idx) => (
            <Chart
              key={childItem.key}
              item={childItem}
              onExpandChange={() => {
                setExpandedChild(expandedChild === idx ? null : idx);
              }}
              expanded={expandedChild === idx}
            />
          ))}
        </div>
      )}
    </div>
  );
}

3. App.js 无需修改（保持原有代码即可） #

修复说明 #

• 全局容器添加overflow-x: auto，保证内容超出时可横向滚动
• 子元素容器设置flex-wrap: wrap，自动换行避免溢出
• 节点卡片使用width: 90% + max-width: 250px实现响应式宽度
• 节点内部元素改用相对定位+transform实现居中，避免绝对定位导致的布局混乱
• 移除嵌套组件外层的align-items: center，防止父元素被子元素高度影响偏移
• 改用item的唯一key作为组件key，避免索引key导致的不必要重绘

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