Overflow

La propriété CSS overflow (débordement, en anglais) définit ce qu’il doit arriver avec un contenu qui est trop gros pour s’adapter à son contenant. Cette propriété permet par exemple de définir si le contenu “en trop” doit être caché ou bien si le navigateur doit ajouter des barres de défilement pour afficher le reste du contenu.

La propriété overflow

La propriété overflow reçoit une des 4 valeurs suivantes :

• visible : c’est la valeur attribuée par défaut. Le contenu en trop sera affiché mais dépassera simplement du contenant.
• hidden : le contenu qui correspond à la taille du contenant est affiché, le reste est caché.
• scroll : le contenu est montré et des barres de navigation sont ajoutées afin que le reste du contenu soit visible.
• auto : pareil que pour scroll, à la seule différence près que auto ajoute de barres de navigation seulement lorsque c’est nécessaire.

Remarque : La propriété overflow ne peut être utilisée qu’avec des éléments HTML de type block ayant une hauteur spécifiée.

Overflow visible

Par défaut, la propriété overflow est définie avec visible. Tout le contenu est montré, mais tout ce qui est “en trop” dépasse du conteneur.

Exemple :

.visible {
    width: 300px;
    height: 60px;
    background: red;
    overflow: visible; /* Le contenu en trop dépassera de l'élément (valeur par défaut) */
}

Overflow hidden