设置overflow-y: scroll导致横向溢出内容被截断的问题

为containerTwo设置overflow-y: scroll后，greenBlock被容器截断，要求静止状态下greenBlock能横向完整溢出显示，滚动时允许截断。

已尝试的无效方案：

• 为容器设置position: relative/absolute
• 将overflow-x设为visible
• 提高greenBlock的z-index

相关代码 #

CSS #

.containerOne {
    padding-left: 200px;
    background-color: red;
    height: 200px;
    width: 200px;
}
.containerTwo {
    background-color: blue;
    height: 200px;
    width: 200px;
    overflow-y: auto;
}
.blockThing {
    background-color: orange;
    height: 70px;
    width: 100px;
    margin: 5px;
}
.greenBlock {
    background-color: green;
    height: 20px;
    width: 80px;
    transform: translatex(-40px);
}

HTML #

<div class="containerOne">
    <div class="containerTwo">
        <div class="blockThing"></div>
        <div class="blockThing">
            <div style="background-color: green; height: 20px; width: 80px; transform: translatex(-40px)">
            </div>
        </div>
        <div class="blockThing"></div>
    </div>
</div>

效果对比 #

• 未设置overflow-y: auto时：
  
• 设置overflow-y: auto时：
  

核心原因：当容器设置overflow-y: auto/scroll时，浏览器会强制将overflow-x隐式设为auto（而非visible），这是CSS规范行为，导致横向溢出内容被裁剪。以下是两种可行方案：

方案一：将greenBlock移出滚动容器 #

把greenBlock从containerTwo内部移出，通过绝对定位固定到目标位置，脱离滚动容器的裁剪限制：

修改后HTML：

<div class="containerOne">
    <div class="containerTwo">
        <div class="blockThing"></div>
        <div class="blockThing"></div>
        <div class="blockThing"></div>
    </div>
    <div class="greenBlock"></div>
</div>

新增CSS：

.containerOne {
    position: relative; /* 作为greenBlock的定位基准 */
}
.greenBlock {
    position: absolute;
    top: 80px; /* 根据布局调整对应位置 */
    left: 160px;
    z-index: 1;
}

方案二：用伪元素替代transform偏移 #

无需调整DOM结构，给目标blockThing添加伪元素实现绿色块，利用绝对定位脱离文档流，避免被滚动容器裁剪：

修改后CSS：

.blockThing:nth-child(2) {
    position: relative;
}
.blockThing:nth-child(2)::before {
    content: '';
    position: absolute;
    left: -40px;
    top: 0;
    background-color: green;
    height: 20px;
    width: 80px;
}

同时移除HTML中内嵌的greenBlock元素即可。

两种方案都能实现「静止时greenBlock完整显示，滚动时随容器滚动并允许截断」的需求。

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