overflow
========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`overflow` は CSS の一括指定プロパティで、要素のオーバーフロー時、すなわち、要素の内容が多すぎてブロック整形コンテキストに収まらない場合の望ましい動作を両方向について設定します。

試してみましょう
--------

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `overflow-x`
* `overflow-y`
構文
--


```css
/\* キーワード値 \*/
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/\* グローバル値 \*/
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: unset;
```


`overflow` プロパティは、以下の値の一覧のうち一つまたは二つのキーワードで指定します。二つのキーワードが指定された場合、最初の値が `overflow-x` で、二つ目の値が `overflow-y` になります。それ以外の場合、 `overflow-x` および `overflow-y` は同じ値に設定されます。

### 値

`visible`

内容はクリッピングされず、パディングボックスの外側に表示されることがあります。

`hidden`

内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず、ユーザーがスクロールできるようにするための対応 (ドラッグやスクロールホイールによる方法) もありません。内容はプログラム的に (例えば、 `offsetLeft` のようなプロパティの値を設定する方法などで) スクロールすることが*できます*ので、要素はスクロールコンテナーになります。

`clip`

`hidden` と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 `clip` と `hidden` の違いは、 `clip` キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 `display: flow-root` を使用して実現することができます。

`scroll`

内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを常に表示します。プリンターはあふれた部分の内容を印刷する可能性があります。

`auto`

ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形コンテキストを生成します。デスクトップブラウザーは内容があふれる場合、スクロールバーを表示します。

`overlay` 
非推奨

`auto` と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。

#### Mozilla 拡張

`-moz-scrollbars-none` 
非推奨

代わりに `overflow: hidden` を使ってください。

`-moz-scrollbars-horizontal` 
非推奨

``overflow-x`: scroll` および ``overflow-y`: hidden`、または `overflow: scroll hidden` を代わりに使用してください。

`-moz-scrollbars-vertical` 
非推奨

``overflow-x`: hidden` および ``overflow-y`: scroll`、または `overflow: hidden scroll` を代わりに使用してください。

`-moz-hidden-unscrollable` 
非推奨

代わりに `overflow: clip` を使用してください。

Firefox 63 において、 `-moz-scrollbars-none`, `-moz-scrollbars-horizontal`, `-moz-scrollbars-vertical` は機能設定で隠されています。 about:config の中で `layout.css.overflow.moz-scrollbars.enabled` を `true` に設定してください。

解説
--

オーバーフローの選択肢としては、クリッピング、スクロールバーの表示、コンテナーの外側にはみ出して周囲の領域に表示するものがあります。

値を (既定値の) `visible` 以外の値に指定すると、新たなブロック整形コンテキストを生成します。これは技術的な理由で必要なものです。そうでなければ、もしスクロールする要素に浮動要素が交差している時、スクロールするごとに強制的に折り返し処理をやり直すことになり、スクロール操作が遅くなる原因になるからです。

`overflow` の効果を得るには、ブロックレベルコンテナーに高さ (`height` または `max-height`) を設定するか、 `white-space` を `nowrap` に設定することが必要です。

一方の軸を`visible` (既定値) に設定して、もう一方を*他の*値に設定すると、 `visible` は `auto` として動作する結果になります。

JavaScript の `Element.scrollTop` プロパティは、 `overflow` が `hidden` に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `visible` |
| 適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `overflow-x`: 指定通り、ただし `overflow-x` と `overflow-y` のどちらかが `visible` でも clip でもない場合は、 `visible`/`clip` はそれぞれ `auto`/`hidden` と計算される
* `overflow-y`: 指定通り、ただし `overflow-x` と `overflow-y` のどちらかが `visible` でも clip でもない場合は、 `visible`/`clip` はそれぞれ `auto`/`hidden` と計算される
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overflow =   
  <'overflow-block'>{1,2}    
  
```

例
-

### テキストに様々な overflow の値を設定

#### HTML


```html
<div>
  <code>visible</code>
  <p class="visible">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium.
  </p>
</div>
```


#### CSS


```css
body {
  display: flex;
  justify-content: space-around;
}

div {
  margin: 1em;
  font-size: 1.2em;
}

p {
  width: 8em;
  height: 5em;
  border: dotted;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連 CSS プロパティ: `text-overflow`, `white-space`, `overflow-x`, `overflow-y`, `overflow-inline`, `overflow-block`, `clip`, `display`
* CSS オーバーフロー および スクロール可能なオーバーフローのデバッグ (en-US)