※このページは、実際にCSSを使って表示させているので、IE6.0以外のブラウザでは正しく表示されていない場合があります。

ⅰ）「overflow: visible;」

この要素は幅100px、高さ100pxに設定されていますが、「overflow: visible;」に指定されているので、サイズ指定は無視されて、 幅147px、高さ143pxの画像の、本来はみ出る部分も表示されています。　

　

ⅱ）「overflow: hidden;」

この要素は幅100px、高さ100pxに設定されていますが、「overflow: hidden;」に指定されているので、はみ出る内容は表示されません。

　

ⅲ）「overflow: scroll;」

この要素は幅100px、高さ100pxに設定されていますが、「overflow: scroll;」に指定されているので、はみ出る部分はスクロールによって見ることが出来ます。　

　

ⅳ）「overflow: auto;」

この要素は幅100px、高さ100pxに設定されていますが、「overflow: auto;」に指定されているので、ブラウザが自動的に判断して処理しています。

　

上の例では「overflow: scroll;」と「overflow: auto;」は表示が同じになっていますが、下の例のように内容が全て表示できるだけの幅もしくは高さが確保された場合、 「overflow: auto;」は不必要なスクロールバーを表示しません。

ⅰ）「overflow: scroll;」

この要素は幅170px、高さ100pxに設定されているので、内容の幅を全て表示できますが、「overflow: scroll;」に指定されているので、横方向のスクロールバーも表示されています。

　

ⅱ）「overflow: auto;」

この要素は幅170px、高さ100pxに設定されているので、内容の幅を全て表示できますから、「overflow: auto;」を指定すると、横方向のスクロールバーは表示されません。　

　

この要素は幅100px、高さ170pxに設定されているので、内容の高さを全て表示できますから、「overflow: auto;」を指定すると、縦方向のスクロールバーは表示されません。