Classes utilitaires pour contrôler le comportement du débordement de contenu.
Disponibles en version globale (overflow),
axe vertical (overflow-y)
et axe horizontal (overflow-x).
Chaque classe dispose d'un suffixe responsive par breakpoint.
.overflow-hidden — contenu masqué au-delà des limites
Contenu plus large que le conteneur, invisible au-delà.
.overflow-visible — contenu visible au-delà des limites
Contenu plus large que le conteneur, déborde librement.
.overflow-auto — scrollbar si nécessaire
Contenu plus large que le conteneur, scrollable.
.overflow-x-auto — scroll horizontal uniquement
Scroll horizontal uniquement sur ce conteneur.
.overflow-y-auto — scroll vertical uniquement
Ligne 1
Ligne 2
Ligne 3
Ligne 4
| CLASSE | PROPRIÉTÉ APPLIQUÉE | DESCRIPTION |
|---|---|---|
.overflow-hidden |
overflow: hidden |
Masque tout contenu débordant sur les deux axes. |
.overflow-visible |
overflow: visible |
Laisse le contenu déborder librement sur les deux axes (comportement navigateur par défaut). |
.overflow-auto |
overflow: auto |
Affiche une scrollbar sur les deux axes uniquement si le contenu dépasse. |
.overflow-y-auto |
overflow-y: auto |
Affiche une scrollbar verticale uniquement si le contenu dépasse en hauteur. |
.overflow-x-auto |
overflow-x: auto |
Affiche une scrollbar horizontale uniquement si le contenu dépasse en largeur. |
.overflow-y-hidden |
overflow-y: hidden |
Masque le débordement vertical uniquement. |
.overflow-x-hidden |
overflow-x: hidden |
Masque le débordement horizontal uniquement. |
Chaque classe dispose d'un équivalent responsive suffixé par le nom du breakpoint.
La classe s'applique à partir du breakpoint spécifié (min-width).
Les breakpoints disponibles sont définis dans abstracts/breakpoints.
Les suffixes disponibles correspondent aux clés définies dans
$breakpoints de
abstracts/breakpoints.
Chaque suffixe génère une règle @media (min-width: ...) dédiée.
| CLASSE DE BASE | ÉQUIVALENT RESPONSIVE |
|---|---|
.overflow-hidden |
.overflow-hidden-{bp} |
.overflow-visible |
.overflow-visible-{bp} |
.overflow-auto |
.overflow-auto-{bp} |
.overflow-y-auto |
.overflow-y-auto-{bp} |
.overflow-x-auto |
.overflow-x-auto-{bp} |
.overflow-y-hidden |
.overflow-y-hidden-{bp} |
.overflow-x-hidden |
.overflow-x-hidden-{bp} |
Toujours définir une hauteur ou largeur explicite sur le conteneur pour que
overflow-y-auto ou
overflow-x-auto déclenchent la scrollbar.
Sans dimension contrainte, il n'y a pas de débordement.
Ne pas combiner .overflow-hidden et
.overflow-x-auto sur le même élément :
overflow: hidden écrase les valeurs d'axe définies séparément.
Overflow · WEBDEV-UI DOCS / V1