overflowのレンダリング

visible (ボックスからはみ出して表示)

こんにちは　こんにちは　こんにちは　こんにちは
こんにちは　こんにちは　こんにちは　こんにちは
こんにちは　こんにちは　こんにちは　こんにちは
こんにちは　こんにちは　こんにちは　こんにちは
こんにちは　こんにちは　こんにちは　こんにちは

<div style="width:200px; height:100px; background:#def; overflow:visible;">
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは
</div>
<br><br><br><br>

hidden (はみ出した部分をカットして表示)

<div style="width:200px; height:100px; background:#ff9; overflow:hidden;">
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは
</div>

scroll (内容をスクロール表示)

<div style="width:200px; height:100px; background:#cf9; overflow:scroll;">
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは
</div>

*1 overflow:scroll;を指定した際には、ボックスから内容が、はみ出す、はみ出さないに関わらず、常にスクロールバー、あるいはスクロールバーの領域が表示されます。

auto (ブラウザに依存 - 一般的にはスクロール表示)

<div style="width:200px; height:100px; background:#fbb; overflow:auto;">
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは<br>
こんにちは　こんにちは　こんにちは　こんにちは
</div>

overflow:auto;のスクロールバーの表示


<div style="width:200px; height:200px; background:#def; overflow:auto;">

こんにちは　こんにちは　こんにちは　こんにちは<br>

こんにちは　こんにちは　こんにちは　こんにちは<br>

こんにちは　こんにちは　こんにちは　こんにちは<br>

こんにちは　こんにちは　こんにちは　こんにちは<br>

こんにちは　こんにちは　こんにちは　こんにちは

</div>

*2 以前のブラウザでは、ボックスから内容が、はみ出す、はみ出さないに関わらず、overflow:auto;を指定した際に常にスクロールバーが表示されるものがありました。2008年11月現在、ie7、ff3、o9、sf3、gc2において、内容がはみ出さない際は、スクロールバーは表示されません。