Overflow

2

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é 🟩.

Voir le CodePen de Simon Arnold (@smnarnold).

La propriété overflow ne fonctionne que sur les parents aillant une position autre que static.

Pour en savoir plus, voir cet article MDN à propos d'overflow.

overflow-x et 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.

Pour en savoir plus voir cet article à propos d'overflow-x et celui-ci à propos d'overflow-y.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme