overflow-yプロパティ

overflow-yプロパティはブロックコンテナ要素内にあるコンテンツの表示方法について、Y軸（縦方向）のみに対して指定するためのプロパティです。X軸（横方向）に対して設定を行うoverflow-xプロパティもあります。

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

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

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

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

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

.box1 {
  overflow-y: visible;
  height: 25px;
}

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

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

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

.box2 {
  overflow-y: hidden;
  height: 25px;
}

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

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

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

.box3 {
  overflow-y: scroll;
  height: 25px;
}

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

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

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