滚动容器外定位元素被截断：原因及无HTML修改方案咨询

1. 为何添加overflow-y: scroll后按钮被截断？ #

当容器设置overflow-y: scroll（或auto、hidden这类非visible的overflow值）时，浏览器会触发容器的块级格式化上下文（BFC），并将容器的裁剪边界严格限定在自身的padding box范围内。原本在overflow: visible（默认值）时，子元素可以超出容器边界正常显示，但一旦设置了滚动溢出属性，任何超出容器padding box的子元素内容都会被直接裁剪，这就是按钮被截断的核心原因。

2. 不修改HTML的前提下能否完整显示按钮？ #

可以，提供3种可行的CSS方案：

• 方案1：用绝对定位脱离裁剪范围
  给侧边栏的父元素添加position: relative，然后给按钮设置position: absolute，通过left/right等属性调整位置，让按钮一半露出侧边栏。此时按钮的定位上下文是父元素，不属于侧边栏的overflow裁剪范围，因此不会被截断。
• 方案2：利用overflow-clip-margin扩展裁剪边界
  给侧边栏添加overflow-clip-margin: 50px（数值根据按钮需要露出的宽度调整），这个属性会让容器的裁剪边界向外扩展指定距离，按钮超出容器的部分只要在这个范围内，就不会被裁剪。这是最直接的解决方案，不需要调整元素定位。
• 方案3：用transform偏移按钮
  给按钮设置transform: translateX(50%)（方向和数值根据实际布局调整），由于transform的变换是在元素的布局框之外进行的，不会被容器的overflow属性裁剪，这样也能让按钮完整显示。

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