CSSで背景色が途中で切れる

Question

1日考えてわかりませんでした。
どなたか教えてください。

例えば以下のようなhtmlとcssがあったとします。

■ html ■

<div id="wrap">

<header class="header">

</header>

<div class="container">
	
</div><!-- / container -->

</div><!-- / wrap -->

■ css ■
#wrap {
background-color: #cc0000;
}
.header {
width: 800px;
height: 100px;
margin: 0 auto;
background: #ccc;
}
.container {
width: 800px;
height: 140px;
margin: 0 auto;
}

通常の場合

このように見えます。（こちらはOK）

しかしブラウザを縮めてみると、wrap部分の背景色が途中で切れます。

これはなぜでしょうか？

Answer 1

#wrap {
    background-color: #cc0000; 
    min-width:800px; 
} 

のように最小幅をheaderと同じに指定してやれば解決です。

Comments

[nantaro]

素晴らしいです！
ありがとうございました！！！

Answer 2

ブラウザの開発者モードで要素を調べれば視覚的に解ると思いますが、質問に挙げられているパターンの場合、対象のブロック要素に対して（幅の指定が無いために）ブラウザの表示領域分の幅しか確保されず『スクロールすると背景が途中で切れる』のでしょう。

Comments

[nantaro]

なるほど、これはどうしようもないことなのですね。
意味がわかってすっきりしました。
ありがとうございました。