Html 奇怪的行为；溢出：自动"；论铬

我正在开发一个带有博客部分的网站。我需要这个部分有一个固定的高度。为了能够看到博客中的所有帖子，我添加了一个溢出：auto，以便在需要时显示一个滚动条

<div id="container">
<div id="content">
    <div class="post">
         This is a long post....
    </div>
    <div class="post">
        This is a long post....
    </div>
    <div class="post">
        This is a long post....
    </div>
    ....
    ....
    ....
    ....
</div>
</div>

#container {
    overflow: hidden;
}

#content {
    height: 200px;
    overflow: auto;
    border: 1px solid red;
}

.post {
    margin: 20px 0;
}

这是一篇很长的帖子。。。。
这是一篇很长的帖子。。。。
这是一篇很长的帖子。。。。
....
....
....
....
#容器{
溢出：隐藏；
}
#内容{
高度：200px；
溢出：自动；
边框：1px纯红；
}
.邮政{
利润率：20px0；
}

我在Chrome、Firefox和IE上对此进行了测试。Firefox和IE上的站点按预期工作，但是Chrome虽然在帖子列表大于容器时会显示一个滚动条，但它在容器下的帖子列表大小上增加了一个白色间隙

我创建了一个小提琴，但我无法复制那里的Chrome行为：

使用溢出：滚动而不是自动，可以得到相同的结果

有什么想法吗

---

提前感谢

HTML5应用程序开发基础的一个可能答案

#content{
     height: 200px;
     region-overflow:auto;
     overflow:visible;
     border 1px solid red;
}

现在，这是齿轮更多的响应设计。在溢出之前添加-webkit-before可能会有所帮助，因为这只是一个chrome问题。假设它是CSS3

#content {
    height: 200px;
    overflow: auto;
    -webkit-overflow: auto;
    border: 1px solid red;
}

---

我找到了解决我问题的办法。出于某种原因，为了在Chrome中发挥作用，我必须在内容中添加一个位置：相对规则：

#content{
    position: relative;
    height: 200px;
    overflow:visible;
    border 1px solid red;
}

---

如果您不能在JSFIDLE中复制它，那么您可能有更多的代码导致了这个问题。另外，放置一把不会重现问题的小提琴有什么意义？天哪，谢谢！我的问题是（水平）滚动条似乎位于下一个元素之下，因此无法抓取<代码>位置：容器上的相对修复了该问题。同上，相同的事情，滚动条可见，但仅在一个特定点可抓取。在a中遇到了代码块问题。遇到了类似的情况——仅在Chrome上，并且仅在视网膜显示器上！实际上，我可以将我的窗口拖到一个附加的1x监视器上，并观看页面正确地重新绘制，但在视网膜一侧，它会间歇性地无法绘制大部分滚动部分。这似乎是一个直接的错误，而不是一个标准解释问题。在任何情况下，你的解决方案都是救命稻草。我想说，你的答案之所以有效，不是因为

位置：相对
，而是因为
溢出：可见
，这使得它从不显示滚动条。