如何解决React时间线组件图标被截断且溢出侵占其他模块的问题

根因说明 #

• 图标截断是因为你将图标容器.itemContainer设为绝对定位，向卡片外侧偏移了40px，但CSS存在隐含规则：当元素的overflow-x和overflow-y其中一个值为非visible时，另一个原本为visible的属性会被浏览器自动重置为auto，你之前给多元素零散添加overflow-x: visible没有解决层级裁切的问题。
• 添加全局overflow: visible后侵占下方模块，是因为全局开启overflow可见后，没有限制纵向溢出规则，同时你没有给时间线容器预留图标显示的横向空间，导致溢出内容挤占其他模块位置。

具体修改步骤 #

1. 移除全局样式中多余的overflow配置，删除*选择器里的overflow-x: visible语句，全局设置overflow是导致样式混乱的核心原因。
2. 给时间线容器添加预留空间和溢出规则，修改.timeline-container样式：

.timeline-container {
  /* 原有样式全部保留，新增以下配置 */
  padding: 0 50px; /* 左右预留50px空间显示两侧图标 */
  overflow-x: visible; /* 允许横向超出内容显示，保证图标完整 */
  overflow-y: hidden; /* 纵向溢出内容裁切，避免侵占下方模块 */
}

3. 给时间线项设置允许超出显示，修改.timeline-item样式：

.timeline-item {
  /* 原有样式全部保留，新增以下配置 */
  overflow: visible;
}

4. 修正JSX里的属性错误，你在写Mail图标时把className写错成了小写的classname，会导致自定义图标样式不生效，修改为：

<Mail className="icon" />

验证效果 #

修改完成后，图标会在预留的横向空间完整显示，纵向溢出内容会被裁切，不会影响下方Contact模块的布局。

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