# overflow

> 要素からはみ出したコンテンツの表示方法を指定するプロパティです。visible、hidden、scroll、autoなどがあり、スクロール領域の制御やレイアウトの調整に使用します。overflow-xとoverflow-yで軸ごとに指定も可能です。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/overflow/

## 構文

```css
overflow: visible | hidden | scroll | auto
```

## Tailwindでは

- `overflow-hidden` → overflow: hidden
- `overflow-x-auto` → overflow-x: auto
- `overflow-y-scroll` → overflow-y: scroll
- `overflow-clip` → overflow: clip

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: visible（初期値）はみ出した内容もそのまま表示されます。

```css
.box {
  width: 200px;
  height: 80px;
  overflow: visible;
}
```

### 例2: hiddenはみ出した部分を非表示にします。スクロールもできません。

```css
.box {
  width: 200px;
  height: 80px;
  overflow: hidden;
}
```

### 例3: scrollは常にスクロールバーが表示されます。内容がはみ出していなくてもバーが出ます。

```css
.box {
  width: 200px;
  height: 80px;
  overflow: scroll;
}
```

### 例4: autoは必要な時だけスクロールバーが表示されます。はみ出した時だけバーが出ます。

```css
.box {
  width: 200px;
  height: 80px;
  overflow: auto;
}
```

## TIPS

overflow: hiddenは要素の角丸やマスキング効果にも使える。

## AIがよく間違えるポイント

overflow: hiddenが祖先にあるとposition: stickyが効かなくなる副作用は、AIが原因究明で見落とす定番です。単に「はみ出しを切りたい」だけならスクロールコンテナを作らないoverflow: clipという新しい選択肢もあります。

## AIへの依頼文例

- position: stickyが効かない原因を祖先のoverflow設定から調査して
- overflow: hiddenとclipの違いを踏まえて、この装飾のはみ出し対策を実装して