Html 滚动条在某些页面上不起作用，但在其他页面上起作用

我遇到了一个奇怪的问题，滚动条的功能在某些地方很有魅力，但在其他地方却没有。我觉得这很奇怪

.content { 
float:left;
margin:30px;
position:absolute;
top:125px;
right:5px;
width:650px;
z-index:9999;
-webkit-font-smoothing:antialiased;
background-image:url(../images/text-bg.png);
padding:10px;
border-radius:5px;
max-height:420px;
overflow-x:auto;
}

以及：

以及：

---

所以，这是相当标准的。您得到的文本比滚动条显示的框大小多。这样就可以正常工作了，您可以看到滚动条，但在某些页面上没有滚动条，在其他页面上也没有滚动条。考虑到这是一个html文件（index.html），我不知所措。

你能用html创建一个JSFIDLE吗？

overflow-x:scroll

？

::-webkit-scrollbar {
width: 7px;
z-index:999;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(255,255,255,.5);
-webkit-box-shadow: inset 0 0 20px rgba(200,200,200,.5);
}