React AntDesign项目新增Timeline组件后布局偏移右侧出现多余边距求助

可能的诱因 #

• 错误设置了内容容器宽度：你SCSS中content-container-light类设置了width: 100vw，100vw为完整视口宽度，不会自动扣除左侧Sider的固定宽度，也不会计算纵向滚动条的占位宽度。当Timeline内容较多触发纵向滚动条出现时，内容容器宽度就会超出视口可用宽度，产生横向溢出，表现为右侧多余边距。即使当前你注释了该类的引用，后续取消注释时也会触发相同问题。
• 未限制内容区横向溢出：右侧Layout和Content组件没有设置overflow-x: hidden，当内部Timeline的默认边距/内容宽度超出容器宽度时，会直接产生横向溢出。
• 盒模型适配问题：如果全局没有配置box-sizing: border-box，元素的padding、border会额外增加元素总宽度，容易撑破布局。
• AntD Timeline默认样式影响：Timeline组件默认带有左侧边距用于放置时间轴节点，若父容器没有预留对应边距，也可能出现内容溢出。

解决方案 #

1. 移除SCSS中content-container-light类的width: 100vw属性，AntD Layout的flex布局会自动让右侧内容区占满Sider之外的剩余宽度，不需要手动设置视口宽度。
2. 给Content组件添加样式限制横向溢出：

<Content style={{backgroundColor: "blue", overflowX: 'hidden', width: '100%' }}>

3. 全局配置统一盒模型，避免边框内边距撑宽元素：

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

4. 可按需调整Timeline的内边距适配布局：

.ant-timeline {
  width: 100%;
  padding: 0 16px;
}

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