隱藏滾動條（仍然能夠滾動）在內容寬度自動

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>的無法事先知道我的情況，這就是爲什麼我需要將其設置爲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