Overflow (オーバーフロー)

要素のオーバフローを管理しましょう。

4つのデフォルト値とクラスを使用して、 overflowプロパティをその場で調整します。これらのクラスはデフォルトでは応答しません。

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.

This is an example of using .overflow-hidden on an element with set width and height dimensions.

This is an example of using .overflow-visible on an element with set width and height dimensions.

This is an example of using .overflow-scroll on an element with set width and height dimensions.

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

Sass変数を使用すると、 _variables.scssの $overflows変数を変更してオーバーフローユーティリティをカスタマイズできます。

Sass

Utilities API

Overflow utilities は utilities API scss/_utilities.scss で宣言されています。 Learn how to use the utilities API.

    "overflow": (
      property: overflow,
      values: auto hidden visible scroll,
    ),