设置overflow-y:auto后父元素水平裁剪相对定位子元素问题问询

问题成因 #

这是CSS Overflow规范的默认行为导致的：当元素的overflow-y被设置为auto/scroll/hidden（非visible值）时，如果overflow-x保持默认的visible，浏览器会自动将overflow-x的计算值重置为auto。
你给父元素设置overflow-y: auto后，水平方向超出父容器边界的内容也会触发裁剪逻辑，子元素设置left: -70px向左超出父元素左边界，因此被裁剪。

解决方案 #

方案1：给父元素预留左侧空间（适合父元素背景可以延伸到左侧的场景） #

给父元素增加左侧内边距容纳子元素超出的部分，同时用负左边距抵消内边距带来的布局偏移，保证父元素原有位置不变：

.right {
  background-color: red;
  width: 170px; /* 原有100px + 子元素超出的70px */
  height: 300px;
  position: relative;
  left: 200px;
  overflow-y: auto;
  padding-left: 70px;
  margin-left: -70px; /* 抵消宽度增加带来的布局偏移 */
  box-sizing: border-box;
}

方案2：双层父元素结构（适合父元素背景不需要覆盖左侧超出区域的场景） #

拆分父元素职责，外层负责定位和原有样式，内层负责滚动，给内层预留左侧空间：
修改CSS：

/* 外层父元素，保留原有定位、宽高、背景样式 */
.right {
  background-color: red;
  width: 100px;
  height: 300px;
  position: relative;
  left: 200px;
}
/* 内层滚动容器，负责垂直滚动，预留左侧空间 */
.scroll-inner {
  overflow-y: auto;
  height: 100%;
  width: calc(100% + 70px);
  margin-left: -70px;
  padding-left: 70px;
}
.two {
  background-color: blanchedalmond;
  top: 50px;
  height: 50px;
  position: relative;
  left: -70px;
}

修改HTML结构：

<div class="right">
  <div class="scroll-inner">
    <div class="two right-content"></div>
  </div>
</div>

方案3：子元素改为固定定位（仅适合子元素不需要跟随父元素滚动的场景） #

如果子元素不需要随父元素的滚动条滚动，可以直接将子元素的position改为absolute，并基于更上层的定位父元素调整位置，不受当前父元素overflow的影响。

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