Overflow

La propriété overflow pourrait se traduire en québécois par "ce qui dépasse". Cette propriété permet de spécifier comment un élément devrait se comporter lorsqu'un enfant dépasse son cadre.

Examinons les valeurs les plus courantes:

• visible (valeur par défaut) même si un enfant dépasse, celui-ci reste entièrement visible.

• hidden si une partie d'un enfant dépasse, celle-ci est masquée.

• auto si une partie d'un enfant dépasse, le parent la masquera, mais affiche des barres de défilement permettant de le voir en entier.

• scroll identique à auto, mais affiche toujours les barres de défilement, peu importe si un enfant dépasse ou non.

Comparons l'impact de cette propriété lorsqu'un enfant, le carré 🟦, dépasse verticalement de son parent, le carré 🟩.

overflow-x & overflow-y

Ces propriétés fonctionnent de façon identique à overflow. Cependant, elles n'affectent qu'un seul axe, x ou y, comme leur nom l'indique.