overflow-x プロパティ
overflow-x プロパティは、エレメントの内容が横方向にはみ出る（オーバーフロー）ときの表示方法を指定するプロパティです。 そのまま、はみ出る部分を表示しない、スクロールを付けるといったことができます。
縦方向に内容がはみ出る場合は、overflow-yプロパティ、またはoverflowプロパティを使います。
overflow-x プロパティが機能するには、widthプロパティなどでエレメントのサイズが固定されていることが条件です。
width: 300px;
overflow-x: scroll;
ページ内 Index
構文(Syntax)
CSS
overflow-x: visible | hidden | scroll | auto | initial | inherit;
DOM ( JavaScript )
String = object.style.overflowX;
object.style.overflowX="visible | hidden | scroll | auto | initial | inherit";
値（Values）
| Value | 摘要 |
|---|---|
| visible | 初期値（default値）、エレメント領域をはみ出して表示 |
| hidden | エレメント内に収まらない部分は表示しない |
| scroll | 内容が収まるようにスクロールバーを設定。印刷ではスクロールバーは無視されることがある |
| auto | 内容が収まるようにスクロールバーを設定、内容が収まるならスクロールバーは設定されない |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | visible |
| 継承（Inherited） | No |
| CSS Animation | No |
Example
overflow-xの例です。親エレメントid="over"のサイズよりも子エレメントid="contents"のサイズを大きく指定しています。
そのために親エレメントの横にスクロールが表示されます。
エレメントがブロックレベルエレメントであることと、widthプロパティでサイズが固定されていることが条件です。