はみ出しユーティリティ（Overflow） v5.0.0クラス追加
これらの短縮形ユーティリティを使用して、コンテンツを要素からはみ出させる方法を素早く構成。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
はみ出し（Overflow）
4つのデフォルト値とクラスを使用して、その場で overflow プロパティを調整。これらのクラスはデフォルトではレスポンシブ対応はしていない。
はみ出しの種類 ※はみ出し部分が設定例と重なる場合は非表示になります
.overflow-auto（overflow: auto）
.overflow-auto を使用する例。設計上、このコンテンツは垂直方向にスクロールする。
.overflow-hidden（overflow: hidden）
.overflow-hidden を使用する例。
.overflow-visible（overflow: visible）v5.0.0-alpha3追加
.overflow-visible を使用する例。
.overflow-scroll（overflow: scroll）v5.0.0-alpha3追加
.overflow-scroll を使用する例。
設定例
はみ出す時はスクロールバーを表示<div class="overflow-auto">...</div>
はみ出し部分は非表示<div class="overflow-hidden">...</div>
はみ出し部分は表示（デフォルトの動作）<div class="overflow-visible">...</div>
常にスクロールバーを表示<div class="overflow-scroll">...</div>
【設定】
- 使用したい要素に
.overflow-{value}（上記の「はみ出しの種類」から選択）を入れる
【変更履歴】
- 【v5.0.0-alpha3】
.overflow-visible,.overflow-scrollが追加
横方向のはみ出し（overflow-x）v5.3.0新設
overflow-x プロパティを調整し、コンテンツの水平方向のオーバーフローに影響を与える。
はみ出しの種類 ※はみ出し部分が設定例と重なる場合は非表示になります
.overflow-x-auto（overflow-x: auto）
.overflow-x-auto の例。.overflow-x-hidden（overflow-x: hidden）
.overflow-x-hidden の例。.overflow-x-visible（overflow-x: visible）
.overflow-x-visible の例。.overflow-x-scroll（overflow-x: scroll）
.overflow-x-scroll の例。設定例
横にはみ出す時はスクロールバーを表示<div class="overflow-x-auto">...</div>
横のはみ出し部分は非表示<div class="overflow-x-hidden">...</div>
横のはみ出し部分は表示（デフォルトの動作）<div class="overflow-x-visible">...</div>
常に左右のスクロールバーを表示<div class="overflow-x-scroll">...</div>
【設定】
- 使用したい要素に
.overflow-x-{value}（上記の「はみ出しの種類」から選択）を入れる
縦方向のはみ出し（overflow-y）v5.3.0新設
overflow-y プロパティを調整し、コンテンツの垂直方向のオーバーフローに影響を与える。
はみ出しの種類 ※はみ出し部分が設定例と重なる場合は非表示になります
.overflow-y-auto（overflow-y: auto）
.overflow-y-auto の例。.overflow-y-hidden（overflow-y: hidden）
.overflow-y-hidden の例。.overflow-y-visible（overflow-y: visible）
.overflow-y-visible の例。.overflow-y-scroll（overflow-y: scroll）
.overflow-y-scroll の例。設定例
縦にはみ出す時はスクロールバーを表示<div class="overflow-y-auto">...</div>
縦のはみ出し部分は非表示<div class="overflow-y-hidden">...</div>
縦のはみ出し部分は表示（デフォルトの動作）<div class="overflow-y-visible">...</div>
常に上下のスクロールバーを表示<div class="overflow-y-scroll">...</div>
【設定】
- 使用したい要素に
.overflow-y-{value}（上記の「はみ出しの種類」から選択）を入れる
CSS
SassユーティリティAPI（Sass utilities API）v5.0.0-beta3追加、v5.3.0ユーティリティAPIより名称変更
はみ出しユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。
デフォルトの設定
scss/_utilities.scss 内 utils-overflow の設定"overflow": (
property: overflow,
values: auto hidden visible scroll,
),
"overflow-x": (
property: overflow-x,
values: auto hidden visible scroll,
),
"overflow-y": (
property: overflow-y,
values: auto hidden visible scroll,
),