【CSS】overflow-y：上下のはみ出た要素の表示方法

（例）【CSS】overflow-yの使用方法

See the Pen
overflow-y by linlin (@linlin098765)
on CodePen.

<h5>overflow-y: visible; を指定</h5>
<p class="sample" style="overflow-y: visible;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: hidden; を指定</h5>
<p class="sample" style="overflow-y: hidden;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: scroll; を指定</h5>
<p class="sample" style="overflow-y: scroll;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: auto; を指定</h5>
<p class="sample" style="overflow-y: auto;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: no-display; を指定</h5>
<p class="sample" style="overflow-y: no-display;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: no-content; を指定</h5>
<p class="sample" style="overflow-y: no-content;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

p.sample {
	width: 150px; height: 50px;
	background-color:gray; 
}

【CSS】overflow-y：上下のはみ出た要素の表示方法

　CSSのoverflow-yは、ボックス要素の範囲内に収まらない場合の左右について表示方法を指定するプロパティです。

• visible
  ボックス要素からはみ出して表示される（初期値）
• hidden
  ボックス要素からはみ出す部分は非表示となる。スクロールも表示されない
• scroll
  ボックス要素からはみ出す部分は、収まらない部分ははみ出さない。スクロールが表示される
• auto
  ボックス要素に収まらない場合の表示方法はブラウザに依存する
• no-display
  ボックス要素に収まらない場合、ボックス要素そのものがdisplay:noneと同様に非表示となる
• no-content
  ボックス要素に収まらない場合、ボックス要素そのものがdisplay:hiddenと同様に非表示となる