Wat doet de eigenschap overflow in CSS en wanneer moet deze worden gebruikt?

De eigenschap overflow in CSS bepaalt hoe om te gaan met inhoud die buiten de grenzen van een element valt.

• visible: De inhoud wordt volledig weergegeven, zelfs als deze buiten de container uitsteekt.
• hidden: Inhoud die buiten de container uitsteekt, wordt afgesneden en is niet zichtbaar.
• scroll: Altijd worden scrollbalken (horizontaal en verticaal) weergegeven, zelfs als de inhoud niet uitsteekt.
• auto: Scrollbalken verschijnen alleen indien nodig (wanneer de inhoud uitsteekt).

Gebruik:

• Wanneer de inhoud van het element (bijvoorbeeld tekst of afbeelding) groter kan zijn dan de ingestelde afmetingen en het beheer van de weergave nodig is.
• Om scrollbare gebieden binnen de pagina te creëren, bijvoorbeeld voor lijsten, codeblokken of tabellen.
• Om ongewenste inhoud die uitsteekt, af te snijden en de oorspronkelijke lay-out te behouden.

Voorbeeld van gebruik van overflow: auto; voor een blok met beperkte hoogte:

.scrollable-block {
  height: 200px; /* Beperk de hoogte van het blok */
  overflow: auto; /* Voeg scrollbalken toe als de inhoud groter is */
  border: 1px solid #ccc; /* Voeg een rand toe voor duidelijkheid */
  padding: 10px; /* Binnenmarge */
}