overflowプロパティ

overflowプロパティはブロックコンテナ要素内にあるコンテンツの表示方法を指定するためのプロパティです。

overflowプロパティに指定できる値

overflowプロパティには以下の値を指定することができます。

値	内容
`visible`	初期値。親要素内に表示が収まらない場合、外にはみ出しても表示を行います。
`hidden`	親要素の範囲でのみ表示を行います。もし収まらない要素があった場合は途中で切れ取られます。
`clip`	`hidden`と同様に収まらない要素は親要素の範囲で切り取ります。`hidden`との違いは、`clip`はJSなどプログラムによるスクロールも含めて、いかなる方法でも要素内のスクロールをしないように設定することができます。
`scroll`	親要素の範囲で表示が収まらない場合は要素内をスクロールできるようにして全体を閲覧できる状態にします。
`auto`	親要素内に表示が収まらない場合、ブラウザによって自動的に表示方法を選択するための値です。多くのブラウザでは`scroll`と同じ挙動となりますが、異なる可能性もあります。

overflowプロパティは要素のX軸（横方向）とY軸（縦方向）のいずれにも適用するプロパティです。
もしX軸（横方向）のみに適用したいときはoverflow-xプロパティ、Y軸（横方向）にのみ適用したいときはoverflow-yプロパティを使います。

以降はoverflowプロパティを使用するコードの例と、ブラウザで表示した例を紹介していきます。

overflowプロパティの値に「visible」を指定した例です。

.box1 {
  overflow: visible;
  width: 200px;
  height: 50px;
}
.box1 p {
  width: 250px;
  height: 100px;
}

<div class="box1">
  <p>This text is sample for overflow property.</p>
</div>

ブラウザで表示すると以下のようになります。
親要素に収まらない場合でも、全体を表示することを優先した表示になっていることが確認できます。

overflowプロパティの値に「hidden」を指定した例です。

.box2 {
  overflow: hidden;
  width: 200px;
  height: 50px;
}
.box2 p {
  width: 250px;
  height: 100px;
}

<div class="box2">
  <p>This text is sample for overflow property.</p>
</div>

ブラウザで表示してみると以下のようになります。
親要素に収まらない場合はコンテンツが途中でも非表示になっていることが分かります。

overflowプロパティの値に「scroll」を指定した例です。

.box3 {
  overflow: scroll;
  width: 200px;
  height: 50px;
}
.box3 p {
  width: 250px;
  height: 100px;
}

<div class="box3">
  <p>This text is sample for overflow property.</p>
</div>

ブラウザで表示してみると以下のようになります。
親要素に収まらないときはスクロールを表示し、スクロールを操作することでコンテンツの全体を閲覧できる状態になります。

なお、値に「auto」を指定した場合も多くのブラウザでは「scroll」と同じ表示になります。
ただし、ブラウザによっては異なる挙動になる可能性もあるため、確実にスクロール表示にしたいときは「scroll」の指定が安全です。