1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. overflow-block

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

overflow-block

Baseline 2025 *
Newly available

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

* Some parts of this feature may have varying levels of support.

overflow-block は CSS プロパティで、コンテンツがブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、コンテンツをはみ出させる、のいずれかになります。

メモ: overflow-block プロパティは、文書の書字方向に応じて、 overflow-y または overflow-x に対応します。

構文

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

/* グローバル値 */
overflow-block: inherit;
overflow-block: initial;
overflow-block: revert;
overflow-block: revert-layer;
overflow-block: unset;

overflow-block プロパティは、単一の <overflow> キーワード値で指定します。

値

visible

コンテンツは切り取られず、パディングボックスのブロックの先頭とブロックの末尾の端よりも外側に表示される可能性があります。

hidden

ブロック方向にパディングボックスに合わせる必要がある場合は、コンテンツを切り取ります。スクロールバーは表示されません。

clip

あふれたコンテンツは、 overflow-clip-margin プロパティを使用して定義された要素のオーバーフロークリップ枠で切り取られます。

scroll

ブロック方向にパディングボックスに合わせる必要がある場合は、コンテンツを切り取ります。ブラウザーはコンテンツが実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これで、コンテンツが変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターはあふれたコンテンツを印刷するかもしれません。

auto

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

公式定義

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

形式文法

overflow-block = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto
この構文は CSS Overflow Module Level 3 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

HTML

html
<ul>
  <li>
    <code>overflow-block: hidden</code> （ボックスの外側のテキストを隠す）
    <div id="hidden">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: scroll</code> （常にスクロールバーを表示）
    <div id="scroll">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: clip</code> （オーバーフロークリップ枠を越えてボックスの外にあるテキストを隠す）
    <div id="clip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: visible</code> （必要に応じてテキストをボックスの外に表示）
    <div id="visible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:auto</code> （多くのブラウザーでは
    <code>scroll</code> と同じ）
    <div id="auto">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

css
div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
  margin-bottom: 120px;
}

#hidden {
  overflow-block: hidden;
}
#scroll {
  overflow-block: scroll;
}
#clip {
  overflow-block: clip;
}
#visible {
  overflow-block: visible;
}
#auto {
  overflow-block: auto;
}

結果

仕様書

Specification
CSS Overflow Module Level 3
# overflow-control

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content