“窗口”外的内容不可见？

Question

我正在尝试创建一个顶部边框的网站，但是当浏览器窗口被压缩并出现水平滚动条时，只有当滚动条位于其原始位置时，顶部的边框才可见。如果向右滚动，边框将停止。

HTML code：

<div id='container'>
    <div id='content'>
        As you can see, when the window is small enough for scrolling, the border only exists in the "original" window space.
    </div>
</div>

CSS代码：

* {
    border:0;
    padding:0;
    margin:0;
}
#container {
    border-top:1px solid green;
}
#content {
    width: 400px;
    margin: 0 auto;
}

JS小提琴显示正在发生的事情。 （调整浏览器窗口大小，以便在输出窗口中显示水平滚动条）： http://jsfiddle.net/RL77f/

Answer 1

当浏览器窗口变得比固定内容宽度窄时，这是一种常见行为。解决方案是在外部容器中添加最小宽度。

#container {
  min-width: 400px;
}

Answer 2

#container {
    overflow: auto;
}