当内容宽度为自动时，隐藏滚动条（仍然能够滚动）不起作用

Question

suggested solution对可见滚动条的问题在以下场景中不起作用：

JSFIDDLe

CSS：

#hider {
    position:absolute;
    top: 0;
    left:0;
    height: 400px;
    width: 200px;
    background-color: green;
    overflow: hidden;
}

#scroller {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding-right: 20px;
    padding-bottom: 20px;
    overflow: auto;
}

#content {
    float: left;
    height: auto;
    width: auto;
}

HTML：

<div id="hider">
    <div id="scroller">
        <div id="content">
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
    </div>
</div>

我遇到的问题是 <div id="content"></div> 的 width 在我的情况下无法事先知道，这就是为什么我需要将其设置为 auto。

在这种情况下，滚动条仍然隐藏，滚动仍然有效，但有一个小“故障”：

如果您一直向右滚动，您会注意到<div id="content"></div> 的最后一位被截断。

更具体地说，<div id="content"></div> 右侧隐藏的部分的宽度等于应用于<div id="scroller"></div> 的右侧填充的宽度。这很奇怪。

为什么会这样？我该如何解决？

提前感谢您的帮助！

Answer 1

将padding-right 交给#content 课程似乎可以解决问题。

#content {
    padding-right: 10px; /* increase or decrease */
    /* other styles */
}

Working Fiddle