overflow

箱からはみ出した内容の扱いを決めるプロパティ。外まで見せるか、切り取るか、スクロールできるようにするかを選びます。

遊んでみよう

箱：幅 250px / 高さ 150px

OVERFLOW

この内容は、決められた箱の幅と高さより大きく作られています。

横は収まり、縦へはみ出した内容を箱の外まで表示します

CSS

.element overflow: visible;

値のパターン

はみ出しの扱い overflow

overflowの構成要素

01overflow-x

横方向のはみ出し

2つの値を書くと、1つ目が横方向へはみ出す内容の扱いになります。

02overflow-y

縦方向のはみ出し

2つ目は縦方向の指定です。値が1つだけなら、横方向と縦方向の両方に使われます。

03padding box

切り取りの基準

hiddenやscrollでは、基本的にpaddingの外側の辺ではみ出した内容を切り取ります。

早見表

初期値はvisibleです。内容を残したまま見せ方だけ変える5つの値を比べます。

01visible箱の外まで表示初期値

02hidden切り取って隠すプログラムでスクロール可

03clip切り取って固定スクロール不可

04scroll常にスクロール領域バーの表示は環境依存

05auto必要なときだけスクロールよく使う

よくある使い方

横並びのカードをスクロールする

狭い画面で横並びを保ちたい一覧は、横方向だけautoにして指やキーボードで移動できるようにします。

overflow-x: auto;

角丸から画像をはみ出させない

画像や装飾をカードの丸い輪郭で切り取りたいときは、hiddenを組み合わせます。

border-radius: 16px; overflow: hidden;

長い内容を箱の中で読めるようにする

コードやログの表示領域に上限をつけ、内容が増えたときだけスクロールできるようにします。

max-height: 20rem; overflow: auto;

ポイント

切り取る前に、隠れた内容へ到達できるか確認。

overflowを働かせるには、はみ出す方向のwidthやheightなど、箱の大きさが必要です。hiddenやclipでボタンや文章を見えなくすると、利用者が内容へ到達できないことがあります。スクロール領域には適切な名前を付け、キーボードでも操作できるか確認します。overflowはブロック・Flexbox・Gridのコンテナーに適用でき、通常は子要素へ継承されません。