zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

オーバーフロー

要素または軸の内容のオーバーフローとオーバースクロールを制御します。

大きすぎる内容を切り取るか、見せるか、スクロール可能にするかを選びます。各軸で別の扱いにする場合は x/y 形を使います。overscroll は、内側のスクロールが端に達したとき親へジェスチャーを伝えるかを決めます。

クラスと CSS の早見表

クラスの例期待される宣言
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-clipoverflow: clip;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;
overflow-x-autooverflow-x: auto;
overflow-x-scrolloverflow-x: scroll;
overflow-y-scrolloverflow-y: scroll;
overflow-y-autooverflow-y: auto;
overscroll-autooverscroll-behavior: auto;
overscroll-noneoverscroll-behavior: none;
overscroll-containoverscroll-behavior: contain;
overscroll-x-containoverscroll-behavior-x: contain;
overscroll-y-containoverscroll-behavior-y: contain;
overscroll-y-noneoverscroll-behavior-y: none;
例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

はみ出しを切り取るか表示

hidden と clip は枠の外側を切り取り、visible は子要素を枠の外にも表示します。

はみ出しを切り取るか表示
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Compare clipping, clipping at the edge, and allowing overflow to show.</p>
  <div class="wind-demo-frame w-40 overflow-hidden"><div class="wind-demo-tile w-64">overflow-hidden clips this wide child</div></div>
  <div class="wind-demo-frame w-40 overflow-clip"><div class="wind-demo-tile w-64">overflow-clip also clips</div></div>
  <div class="wind-demo-frame w-40 overflow-visible"><div class="wind-demo-tile w-64">overflow-visible shows the wide child</div></div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.w-40 {
  width: 10rem;
}
.w-64 {
  width: 16rem;
}
.overflow-clip {
  overflow: clip;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "overflow-clip",
        "overflow-hidden",
        "overflow-visible",
        "w-40",
        "w-64"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

1軸または両軸でスクロール

overflow-x-auto は長い行が必要な場合だけ横スクロールし、overflow-x-scroll は横スクロール領域を常に作ります。overflow-y-scroll は常に縦スクロールを有効にし、overflow-scroll は両軸に作用します。

1軸または両軸でスクロール
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Use one axis when only one direction should scroll.</p>
  <div class="wind-demo-frame w-48 overflow-auto overflow-x-auto">
    <div class="wind-demo-tile w-max">Horizontal content: one long row continues past the frame</div>
  </div>
  <div class="wind-demo-frame w-48 overflow-x-scroll"><div class="wind-demo-tile w-max">Always scrollable horizontal track</div></div>
  <div class="wind-demo-frame h-24 w-48 overflow-auto overflow-y-scroll">
    <div class="wind-demo-tile">First row</div><div class="wind-demo-tile">Second row</div><div class="wind-demo-tile">Third row</div><div class="wind-demo-tile">Fourth row</div>
  </div>
  <div class="wind-demo-frame h-24 w-48 overflow-scroll">Scroll is enabled on both axes; content can continue here.</div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.h-24 {
  height: 6rem;
}
.w-48 {
  width: 12rem;
}
.w-max {
  width: max-content;
}
.overflow-auto {
  overflow: auto;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "h-24",
        "overflow-auto",
        "overflow-scroll",
        "overflow-x-auto",
        "overflow-x-scroll",
        "overflow-y-scroll",
        "w-48",
        "w-max"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

スクロールの連鎖を制御

内側の縦横スクローラーは contain を使い、端で外側のパネルにジェスチャーが伝わらないようにします。none は対応環境で端のバウンスも抑えます。

スクロールの連鎖を制御
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Contain scroll gestures at an inner boundary so they do not chain to the outer panel.</p>
  <div class="wind-demo-frame h-36 w-64 overflow-y-auto overscroll-auto overscroll-y-auto">
    <div class="wind-demo-frame h-24 overflow-y-auto overscroll-contain overscroll-y-contain">
      <div class="wind-demo-tile">Inner scroll area</div><div class="wind-demo-tile">More inner content</div><div class="wind-demo-tile">End of inner area</div>
    </div>
    <div class="wind-demo-tile">Outer content continues</div><div class="wind-demo-tile">Outer end</div>
  </div>
  <div class="wind-demo-frame h-24 w-64 overflow-x-auto overscroll-x-contain">
    <div class="wind-demo-tile w-max">Horizontal boundary is contained</div>
  </div>
  <div class="wind-demo-frame h-24 overflow-y-auto overscroll-none overscroll-y-none">
    <div class="wind-demo-tile">Overscroll none</div><div class="wind-demo-tile">More content</div><div class="wind-demo-tile">End</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.h-24 {
  height: 6rem;
}
.h-36 {
  height: 9rem;
}
.w-64 {
  width: 16rem;
}
.w-max {
  width: max-content;
}
.overscroll-auto {
  overscroll-behavior: auto;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.overscroll-none {
  overscroll-behavior: none;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overscroll-x-contain {
  overscroll-behavior-x: contain;
}
.overscroll-y-auto {
  overscroll-behavior-y: auto;
}
.overscroll-y-contain {
  overscroll-behavior-y: contain;
}
.overscroll-y-none {
  overscroll-behavior-y: none;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "h-24",
        "h-36",
        "overflow-x-auto",
        "overflow-y-auto",
        "overscroll-auto",
        "overscroll-contain",
        "overscroll-none",
        "overscroll-x-contain",
        "overscroll-y-auto",
        "overscroll-y-contain",
        "overscroll-y-none",
        "w-64",
        "w-max"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

任意値と名前付きの値

overflow は auto、hidden、clip、visible、scroll を受け取り、x/y 形も同じ値に対応します。auto は必要なときだけスクロールを追加し、scroll は内容が収まってもスクロール領域を作ります。overscroll は両軸または片軸に auto、contain、none を指定します。いずれも固定キーワードで、トークンや任意値はありません。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

overflow

フィールド値
カタログ識別子v1.overflow
クラスパターンoverflow-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値5
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位overflow (13)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverflow

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"hidden""hidden"
keyword"clip""clip"
keyword"visible""visible"
keyword"scroll""scroll"

宣言テンプレート

プロパティ値の種類固定値
overflowresolvednull

カタログの例

クラスの例期待される宣言
overflow-autooverflow: auto

overscroll

フィールド値
カタログ識別子v1.overscroll
クラスパターンoverscroll-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値3
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位overflow (13)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverscroll-behavior

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"contain""contain"
keyword"none""none"

宣言テンプレート

プロパティ値の種類固定値
overscroll-behaviorresolvednull

カタログの例

クラスの例期待される宣言
overscroll-autooverscroll-behavior: auto

overflow-x

フィールド値
カタログ識別子v1.overflow-x
クラスパターンoverflow-x-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値5
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位overflow (13)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverflow-x

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"hidden""hidden"
keyword"clip""clip"
keyword"visible""visible"
keyword"scroll""scroll"

宣言テンプレート

プロパティ値の種類固定値
overflow-xresolvednull

カタログの例

クラスの例期待される宣言
overflow-x-autooverflow-x: auto

overflow-y

フィールド値
カタログ識別子v1.overflow-y
クラスパターンoverflow-y-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値5
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位overflow (13)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverflow-y

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"hidden""hidden"
keyword"clip""clip"
keyword"visible""visible"
keyword"scroll""scroll"

宣言テンプレート

プロパティ値の種類固定値
overflow-yresolvednull

カタログの例

クラスの例期待される宣言
overflow-y-autooverflow-y: auto

overscroll-x

フィールド値
カタログ識別子v1.overscroll-x
クラスパターンoverscroll-x-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値3
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位overflow (13)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverscroll-behavior-x

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"contain""contain"
keyword"none""none"

宣言テンプレート

プロパティ値の種類固定値
overscroll-behavior-xresolvednull

カタログの例

クラスの例期待される宣言
overscroll-x-autooverscroll-behavior-x: auto

overscroll-y

フィールド値
カタログ識別子v1.overscroll-y
クラスパターンoverscroll-y-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値3
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位overflow (13)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverscroll-behavior-y

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"contain""contain"
keyword"none""none"

宣言テンプレート

プロパティ値の種類固定値
overscroll-behavior-yresolvednull

カタログの例

クラスの例期待される宣言
overscroll-y-autooverscroll-behavior-y: auto

Revision History

作成更新