Was bewirkt die Eigenschaft overflow in CSS und in welchen Fällen sollte sie verwendet werden?

Die Eigenschaft overflow in CSS bestimmt, wie mit Inhalt umgegangen wird, der die Grenzen eines Elements überschreitet.

• visible: Der Inhalt wird vollständig angezeigt, auch wenn er den Container überragt.
• hidden: Überschüssiger Inhalt wird abgeschnitten und ist nicht sichtbar.
• scroll: Es werden immer Scrollleisten (horizontal und vertikal) angezeigt, auch wenn der Inhalt nicht überläuft.
• auto: Scrollleisten erscheinen nur bei Bedarf (wenn der Inhalt den Container überragt).

Verwendung:

• Wenn der Inhalt des Elements (z.B. Text oder Bild) größer sein kann als die festgelegten Maße und die Anzeige verwaltet werden soll.
• Um scrollbare Bereiche innerhalb der Seite zu erstellen, z.B. für Listen, Codeblöcke oder Tabellen.
• Um unerwünschten Inhalt, der das Element überragt, abzuschneiden und das ursprüngliche Layout beizubehalten.

Beispiel für die Verwendung von overflow: auto; für einen Block mit begrenzter Höhe:

.scrollable-block {
  height: 200px; /* Begrenzung der Blockhöhe */
  overflow: auto; /* Scrollleisten hinzufügen, wenn der Inhalt größer ist */
  border: 1px solid #ccc; /* Rahmen für Sichtbarkeit */
  padding: 10px; /* Innenabstand */
}