html - 「ウィンドウ」の外側のコンテンツが表示されない?

Question

上部の境界線が横切る Web サイトを作成しようとしていますが、ブラウザー ウィンドウが圧縮され、水平スクロール バーが表示されると、スクロールバーが元の位置にある場合にのみ上部の境界線が表示されます。右にスクロールすると、枠が止まります。

HTML コード:

<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;
}