CSS overflow プロパティ

1. CSS overflow

overflow プロパティは、要素のボックスに収まりきらないほど大きなコンテンツを、クリッピング（切り抜き）するか、あるいはスクロールバーを表示させるかを制御します。

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

• visible - デフォルト値。コンテンツはクリッピングされず、要素のボックスの外側にレンダリングされます。
• hidden - コンテンツは要素のサイズでクリッピングされ、溢れた部分は非表示になります。
• scroll - コンテンツはクリッピングされますが、溢れたコンテンツを見るためのスクロールバーが常に追加されます。
• auto - scroll と似ていますが、コンテンツが溢れた場合にのみスクロールバーが表示されます。

注意: overflow プロパティが機能するのは、指定された高さ（height または max-height）を持つブロック要素（block elements）に対してのみです。

注意: OS X Lion 以降のブラウザでは、スクロールバーはデフォルトで非表示になっており、使用中（スクロール中）のみ表示されるのが一般的です。

1.1 overflow: visible

デフォルトでは overflow は visible に設定されています。これはコンテンツがクリッピングされず、要素のボックスの外側にはみ出して表示されることを意味します。

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

1.2 overflow: hidden

hidden を指定すると、はみ出したコンテンツはクリッピングされ、残りの部分は隠されて見えなくなります。

div {
  overflow: hidden;
}

1.3 overflow: scroll

scroll を指定すると、コンテンツは指定された領域内に収まるようにクリッピングされますが、ブラウザは常にスクロールバーを表示します。これにより、コンテンツがはみ出しているかどうかに関わらず、スクロール用のインターフェースが確保されます。

div {
  overflow: scroll;
}

1.4 overflow: auto

auto プロパティ値は scroll に似ていますが、必要に応じてのみスクロールバーを表示します。

div {
  overflow: auto;
}

2. overflow-x および overflow-y

overflow-x および overflow-y プロパティを使用すると、コンテンツの溢れを水平方向（左/右）または垂直方向（上/下）のみ個別に変更することができます。

• overflow-x：コンテンツの左端/右端の処理を指定します。
• overflow-y：コンテンツの上端/下端の処理を指定します。

div {
  overflow-x: hidden; /* 水平方向のスクロールバーを隠す */
  overflow-y: scroll; /* 垂直方向のスクロールバーを常に表示する */
}

3. 全ての CSS Overflow プロパティ