React添加组件后页面横向宽度异常问题求助

常见原因及对应解决办法： #

• 子组件固定宽度过大：检查Component1、Component2内部是否设置了固定宽度（如width: 1200px）或min-width值超过父容器宽度。给子组件添加max-width: 100%，让其自适应父容器宽度。
• 盒模型计算问题：默认盒模型下，元素的padding、border会额外增加宽度，导致超出父容器。全局统一盒模型：

* {
  box-sizing: border-box;
}

这样元素的padding和border会包含在设置的宽度内，不会撑破容器。

• 长文本/无换行元素溢出：如果组件内有长字符串、图片等，需设置换行或自适应：
  • 图片添加样式：max-width: 100%; height: auto;
  • 长文本添加：white-space: normal; word-break: break-all;
• 临时应急处理：若想快速阻止横向滚动，给父容器添加overflow-x: hidden，但建议优先排查根本原因，避免隐藏正常内容。

修改后的示例代码： #

<div className="w-100" style={{ boxSizing: 'border-box', overflowX: 'hidden' }}>
  <Component1 style={{ maxWidth: '100%' }} />
  <Component2 style={{ maxWidth: '100%' }} />
</div>

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