实现子元素溢出父容器同时保持父容器滚动功能

我完全理解你的需求：弹窗要能突破可滚动容器的边界完整显示，同时滚动容器内容时，弹窗得跟着内容一起移动，而且优先用纯CSS方案。咱们来一步步搞定这个问题。

问题根源 #

你原来的代码里，.container设置了overflow-y: scroll，浏览器会自动把overflow-x强制设为auto（这是浏览器的默认行为：当一个轴设置为scroll/auto时，另一个轴的visible会被转为auto），所以弹窗宽度超出容器后会被裁剪。如果直接给弹窗加position: absolute，又会因为没有合适的定位父元素，导致弹窗相对于视口固定，滚动容器时不会跟着内容移动。

纯CSS解决方案 #

核心思路是把滚动逻辑拆分到内层容器，让外层容器不设置overflow，允许弹窗溢出。这样既保证内容可以垂直滚动，又能让弹窗突破容器边界，同时滚动时弹窗会跟着内容同步移动。

具体实现步骤：

1. 在原.container内部新增一个内层滚动容器（比如.scroll-inner），将所有内容移入这个内层容器。
2. 给内层容器设置overflow-y: scroll实现垂直滚动，同时添加position: relative作为弹窗的定位参考父元素。
3. 外层.container只负责控制宽高和边框，不设置overflow属性，让弹窗可以自然溢出显示。
4. 给弹窗设置position: absolute，相对于内层滚动容器定位，这样滚动时弹窗会跟着内容一起移动。

完整代码 #

HTML

<div class="container">
  <div class="scroll-inner">
    <div class="child">
      <button id="open">Open</button>
      <div>other content</div>
      <div>other content</div>
      <div>other content</div>
      <div>other content</div>
      <div>other content</div>
      <div>other content</div>
    </div>
  </div>
</div>

CSS

.container {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  /* 不设置overflow，允许内部内容向外溢出 */
}

.scroll-inner {
  height: 100%;
  overflow-y: scroll;
  overflow-x: visible; /* 水平方向允许溢出，外层无overflow所以此设置生效 */
  position: relative; /* 作为弹窗的定位参考 */
}

.child {
  height: 300px;
}

.popup {
  width: 150px;
  height: 50px;
  background: red;
  position: absolute;
  left: 0;
  top: 30px; /* 调整位置到按钮下方，可根据需求修改 */
}

JavaScript（与原代码一致）

const button = document.getElementById('open');
button.addEventListener('click', () => {
  const child = document.querySelector('.child');
  child.insertAdjacentHTML('afterbegin', '<div class="popup"></div>');
});

效果说明 #

• 点击"Open"后，红色弹窗会超出.container的宽度完整显示，不会被容器边界裁剪。
• 滚动容器内容时，弹窗会跟着内容一起上下移动，不会固定在视口位置。
• 容器内的其他内容保持正常的垂直滚动功能不受影响。

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