Que fait la propriété overflow en CSS et dans quels cas doit-elle être utilisée?

La propriété overflow en CSS détermine comment gérer le contenu qui dépasse les limites d'un élément.

• visible : Le contenu est affiché en entier, même s'il dépasse du conteneur.
• hidden : Le contenu qui dépasse du conteneur est coupé et invisible.
• scroll : Des barres de défilement (horizontale et verticale) sont toujours affichées, même si le contenu ne dépasse pas.
• auto : Les barres de défilement apparaissent uniquement si nécessaire (lorsque le contenu dépasse).

À utiliser :

• Lorsque le contenu de l'élément (par exemple, du texte ou une image) peut être plus grand que les dimensions définies, et qu'il faut gérer son affichage.
• Pour créer des zones défilables dans la page, par exemple pour des listes, des blocs de code ou des tableaux.
• Pour couper le contenu indésirable qui dépasse de l'élément, afin de conserver la mise en page d'origine.

Exemple d'utilisation de overflow: auto; pour un bloc à hauteur limitée :

.scrollable-block {
  height: 200px; /* Limiter la hauteur du bloc */
  overflow: auto; /* Ajouter des barres de défilement si le contenu est plus grand */
  border: 1px solid #ccc; /* Ajouter une bordure pour la visibilité */
  padding: 10px; /* Espacement intérieur */
}