停止位置：导致祖先水平滚动的绝对元素

Question

当后代位于屏幕边缘之外时，如何防止元素水平滚动？

我在窗口的右侧有一个round slider，当手柄在边缘时，它导致容器元素滚动

相关的html：

<div id="mainScreen">
    <div id="header">Header</div>
    <div id="content">
        <div class="round_sliders">
            <div id="leftSlider"></div>
            <div class="flex_spacer"></div>
            <div id="rightSlider"></div>
        </div>
        <div id="loremIpsum">...</div>
    </div>
</div>

相关CSS：

.round_sliders {
    display: flex;
}
#leftSlider, #rightSlider {
    flex: 0 0 auto;
}
.flex_spacer {
    flex: 1 1 0px;
}

我尝试将overflow-x: hidden添加到#rightSlider及其大多数祖先，但它总是切断滑块和/或添加垂直滚动条，同时仍然允许元素滚动到右

修改：Example on Codepen

Answer 1

body, #mainScreen {
  overflow-x: hidden;
}

就是这样。 ：）