CSS 要素が入り切らない場合にスクロールバーを表示する方法

要素が入り切らずにはみ出してしまうときにスクロールバーを表示する方法を紹介します。

以下のように、サイズを指定した親要素の中に、入り切らないテキストなどがあると、親要素をはみ出してしまいます。

<div style="width: 300px; height: 100px; background-color: yellow;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

overflowのスタイルを指定すると、親要素をはみ出した分をどのように表示するかを指定することができます。

visible: そのまま表示（初期値）
scroll: 常にスクロールバーを表示
auto: はみ出すときだけスクロールバーを表示
hidden: 非表示

visible

overflowの初期値です。overflowのスタイルを設定しない場合はvisibleとして扱われます。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: visible;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

scroll

scrollを指定すると、親要素にスクロールバーが表示されます。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: scroll;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

scrollを指定した場合は、親要素をはみ出すかどうかにかかわらず、常にスクロールバーが表示されます。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: scroll;">
    短い文章
</div>

auto

親要素をはみ出す場合のみスクロールバーを表示させたい場合はautoを指定します。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: auto;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

親要素がはみ出さない場合はスクロールバーは表示されません。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: auto;">
    短い文章
</div>

hidden

親要素をはみ出した分は非表示にしたい場合はhiddenを指定します。

<div style="width: 300px; height: 100px; background-color: yellow; overflow: hidden;">
    入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>

まとめ

overflowのスタイルでスクロールバーの制御を行うことができました。

横と縦のスクロールバーをそれぞれ別に制御したい場合はoverflow-xまたはoverflow-yのスタイルを使用します。

具体的な方法はCSS 縦または横のみにスクロールバーを表示する方法で紹介しています。