SVG边缘露出页面引发横向滚动，overflow-x:hidden无效求助

1. 你的.graphic是相对定位元素，作为伪元素的包含块，其默认overflow: visible，导致伪元素超出.graphic（即视口）的部分会被渲染出来，直接撑开布局视口。
2. 单独左侧图形时，元素向左超出视口，不会影响布局视口的宽度（布局视口宽度由最右侧元素决定），因此无横向滚动；添加右侧图形后，元素向右超出，直接撑开布局视口，触发横向滚动。
3. html/body的overflow-x:hidden无效，因为溢出的伪元素属于.graphic的子元素，而.graphic的overflow为visible，溢出部分会突破html/body的裁剪范围。

方案一：调整包含块裁剪规则（推荐） #

保留.graphic的相对定位，给它添加overflow:hidden，同时调整伪元素的定位逻辑，确保超出视口的部分被.graphic裁剪：

.graphic {
  position: relative;
  width: 100%;
  min-height: 50vh;
  overflow: hidden; /* 新增：裁剪超出.graphic的内容 */
}

/* 左侧图形：向左超出20vw，40vw部分在视口内 */
.left::before {
  inset: 0 auto 0 -20vw; /* 修正inset，仅设置左偏移，右侧自动 */
  width: 60vw;
  background-image: url('./left.svg');
}

/* 右侧图形：向右超出20vw，40vw部分在视口内 */
.right::before {
  inset: 0 0 0 calc(100% - 40vw); /* 左侧定位在视口60%位置 */
  width: 60vw;
  background-image: url('./right.svg');
}

方案二：让伪元素相对于视口定位 #

如果不需要.graphic作为定位参考，可以移除其position:relative，让伪元素以视口为定位基准，同时保留html/body的overflow-x:hidden：

.graphic {
  width: 100%;
  min-height: 50vh;
  /* 移除position:relative */
}

.left::before {
  position: absolute;
  inset: 0 auto 0 -20vw;
  width: 60vw;
  background-image: url('./left.svg');
}

.right::before {
  position: absolute;
  inset: 0 -20vw 0 auto;
  width: 60vw;
  background-image: url('./right.svg');
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative; /* 可选：确保body作为伪元素的包含块 */
}

两种方案都能实现SVG部分露出、超出视口部分被裁剪，且无横向滚动的效果。

内容的提问来源于stack exchange，提问作者Nikola Zarić