Классы overflow-* задают свойство overflow для обеих осей или
overflow-x и overflow-y для одной. Берите их для областей с заданной
высотой или шириной: списков, таблиц, панелей и карточек, содержимое которых
может оказаться больше самой области.
Пример
Обе оси
У всех образцов одинаковая высота и одинаковый текст. Подпись над образцом —
класс, который на нём стоит.
HTML
<divclass="grid grid-col-1 sm:grid-col-2 gap-4 items-cross-start color-on-surface">
<divclass="flex flex-col gap-1 p-bottom-d4">
<codeclass="text-1/2 color-on-surface-variant">overflow-visible</code>
<divclass="overflow-visible h-d6 p-1 border border-primary bg-primary-container color-on-primary-container radius-ui">
Текст длиннее области. Высота области задана, и всё, что в неё не помещается, ведёт себя по правилу класса: выходит за границы, обрезается или прокручивается.
</div>
</div>
<divclass="flex flex-col gap-1 ">
<codeclass="text-1/2 color-on-surface-variant">overflow-hidden</code>
<divclass="overflow-hidden h-d6 p-1 border border-primary bg-primary-container color-on-primary-container radius-ui">
Текст длиннее области. Высота области задана, и всё, что в неё не помещается, ведёт себя по правилу класса: выходит за границы, обрезается или прокручивается.
</div>
</div>
<divclass="flex flex-col gap-1 ">
<codeclass="text-1/2 color-on-surface-variant">overflow-auto</code>
<divclass="overflow-auto h-d6 p-1 border border-primary bg-primary-container color-on-primary-container radius-ui">
Текст длиннее области. Высота области задана, и всё, что в неё не помещается, ведёт себя по правилу класса: выходит за границы, обрезается или прокручивается.
</div>
</div>
<divclass="flex flex-col gap-1 ">
<codeclass="text-1/2 color-on-surface-variant">overflow-scroll</code>
<divclass="overflow-scroll h-d6 p-1 border border-primary bg-primary-container color-on-primary-container radius-ui">
Текст длиннее области. Высота области задана, и всё, что в неё не помещается, ведёт себя по правилу класса: выходит за границы, обрезается или прокручивается.
</div>
</div>
</div>
Одна ось
Классы с -x- и -y- действуют на одну ось: горизонтальную прокрутку
широкой строки и вертикальную прокрутку списка.
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:overflow-auto.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Выбор значения
overflow-visible — значение по умолчанию: содержимое выходит за границы
элемента и может перекрыть соседей.
overflow-hidden — лишнее обрезается, прокрутки нет. Подходит для
скруглённых карточек с изображением и для обрезки декоративных слоёв.
overflow-auto — полоса прокрутки появляется, только когда содержимое не
помещается. Подходит для большинства прокручиваемых областей.
overflow-scroll — полоса прокрутки есть всегда, даже если всё помещается;
место под неё резервируется, и раскладка не сдвигается при изменении
содержимого. В системах с накладными полосами прокрутки, например в macOS
по умолчанию, полоса появляется только во время прокрутки.
Если одна ось не visible, браузер вычисляет visible на другой оси как
auto: сочетание overflow-x-hidden overflow-y-visible даёт вертикальную
прокрутку, а не выход содержимого за границы.
Обрезка и прокрутка видны только при ограниченном размере: задайте высоту
или ширину области.
Прокручиваемая область без фокусируемых элементов внутри должна быть
доступна с клавиатуры: добавьте ей tabindex="0" и подпись.
Любое значение, кроме overflow-visible, обрезает на границе элемента тени
и выступающие части потомков, в том числе абсолютно позиционированные
подсказки и меню.
