overflow

要素がコンテナに対して大きすぎるコンテンツをどのように処理するかを制御するためのユーティリティ。

クラススタイル

クラス	スタイル
`overflow-auto`	`overflow: auto;`
`overflow-hidden`	`overflow: hidden;`
`overflow-clip`	`overflow: clip;`
`overflow-visible`	`overflow: visible;`
`overflow-scroll`	`overflow: scroll;`
`overflow-x-auto`	`overflow-x: auto;`
`overflow-y-auto`	`overflow-y: auto;`
`overflow-x-hidden`	`overflow-x: hidden;`
`overflow-y-hidden`	`overflow-y: hidden;`
`overflow-x-clip`	`overflow-x: clip;`
`overflow-y-clip`	`overflow-y: clip;`
`overflow-x-visible`	`overflow-x: visible;`
`overflow-y-visible`	`overflow-y: visible;`
`overflow-x-scroll`	`overflow-x: scroll;`
`overflow-y-scroll`	`overflow-y: scroll;`

overflow-auto

overflow: auto;

overflow-hidden

overflow: hidden;

overflow-clip

overflow: clip;

overflow-visible

overflow: visible;

overflow-scroll

overflow: scroll;

overflow-x-auto

overflow-x: auto;

overflow-y-auto

overflow-y: auto;

overflow-x-hidden

overflow-x: hidden;

overflow-y-hidden

overflow-y: hidden;

overflow-x-clip

overflow-x: clip;

overflow-y-clip

overflow-y: clip;

overflow-x-visible

overflow-x: visible;

overflow-y-visible

overflow-y: visible;

overflow-x-scroll

overflow-x: scroll;

overflow-y-scroll

overflow-y: scroll;

例

オーバーフローするコンテンツの表示

overflow-visibleユーティリティを使用して、要素内のコンテンツがクリップされるのを防ぎます。

要素の境界をオーバーフローするコンテンツはすべて表示されることに注意してください。

オーバーフローするコンテンツの非表示

overflow-hiddenユーティリティを使用して、要素の境界をオーバーフローする要素内のコンテンツをクリップします。

必要に応じてスクロール

overflow-autoユーティリティを使用して、コンテンツが要素の境界をオーバーフローした場合に、要素にスクロールバーを追加します。

垂直方向にスクロール

overflow-scrollとは異なり、このユーティリティはスクロールバーを常に表示するのではなく、スクロールが必要な場合にのみ表示します。

必要に応じて水平方向にスクロール

overflow-x-autoユーティリティを使用して、必要に応じて水平スクロールを許可します。

水平方向にスクロール

必要に応じて垂直方向にスクロール

overflow-y-autoユーティリティを使用して、必要に応じて垂直スクロールを許可します。

垂直方向にスクロール

常に水平方向にスクロール

overflow-x-scrollユーティリティを使用して、水平スクロールを許可し、常にスクロールバーを表示します（常に表示されるスクロールバーがオペレーティングシステムによって無効にされていない限り）。

水平方向にスクロール

常に垂直方向にスクロール

overflow-y-scrollユーティリティを使用して、垂直スクロールを許可し、常にスクロールバーを表示します（常に表示されるスクロールバーがオペレーティングシステムによって無効にされていない限り）。

垂直方向にスクロール

全方向にスクロール

overflow-scrollユーティリティを使用して、要素にスクロールバーを追加します。

垂直方向と水平方向にスクロール

Sun

Mon

Tue

Wed

Thu

Fri

Sat

5 AM

6 AM

7 AM

8 AM

9 AM

10 AM

11 AM

12 PM

1 PM

2 PM

3 PM

4 PM

5 PM

6 PM

7 PM

8 PM

5 AMバンクーバー行きのフライトトロント YYZ

6 AM朝食メルズダイナー

5 PM🎉 パーティーパーティー 🎉パーティー大好き！

<div class="overflow-scroll ...">
  <!-- ... -->
</div>

overflow-autoとは異なり、このユーティリティはスクロールが必要な場合にのみスクロールバーを表示しますが、このユーティリティは常に表示します。一部のオペレーティングシステム（macOSなど）では、この設定に関係なく、不要なスクロールバーを非表示にすることに注意してください。

レスポンシブデザイン

プレフィックスan overflowユーティリティ md:のようなブレークポイントバリアントを使用して、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです。

<div class="overflow-auto md:overflow-scroll ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

このページ内