CSS ・ レイアウト
overflow
はみ出した部分の扱い
要素の内容が枠からはみ出したときに、表示するか、隠すか、スクロールさせるかを指定します。
01
サンプルコード
HTML
1<div class="row">
2 <div class="box visible">visible：はみ出した文字もそのまま表示されます。</div>
3 <div class="box hidden">hidden：はみ出した文字は隠されて見えなくなります。</div>
4 <div class="box auto">auto：はみ出した分だけスクロールバーが表示されます。</div>
5</div>
CSS
1.row {
2 display: flex;
3 gap: 16px;
4}
5.box {
6 width: 130px;
7 height: 70px;
8 padding: 6px;
9 border: 1px solid #b68235;
10 font-size: 13px;
11}
12.visible {
13 overflow: visible;
14}
15.hidden {
16 overflow: hidden;
17}
18.auto {
19 overflow: auto;
20}
02
実行結果
ブラウザでの表示
03
解説
overflow は、要素の大きさに内容が収まらないときの扱いを決めます。初期値の visible では、はみ出した部分もそのまま表示されます。
hidden ははみ出た部分を切り取って隠し、auto ははみ出たときだけスクロールバーを表示します。
overflow-x・overflow-y で、横方向と縦方向を別々に指定できます。横に長い表やコードの表示によく使います。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
visible | はみ出した部分も表示（初期値） |
hidden | はみ出した部分を隠す |
auto | 必要なときだけスクロールバーを表示 |
scroll | 常にスクロールバーを表示 |
clip | 隠す（スクロールもできない） |
横に長い表をスクロールさせる
表を div で囲み、横方向だけスクロールできるようにします。
HTML
1<div class="scroll-x">
2 <table>…</table>
3</div>
CSS
1.scroll-x {
2 overflow-x: auto;
3}
注意点
- 01overflow: hidden を付けると、影や飛び出した装飾まで切れてしまうことがあります。
- 02overflow が visible 以外の祖先がいると、position: sticky が効かなくなります。