Co dělá vlastnost overflow v CSS a v jakých případech by měla být použita?

Vlastnost overflow v CSS určuje, jak zacházet s obsahem, který přesahuje hranice prvku.

• visible: Obsah je zobrazen úplně, i když přesahuje kontejner.
• hidden: Přesahující obsah je oříznut a není viditelný.
• scroll: Vždy jsou zobrazeny posuvníky (horizontální a vertikální), i když obsah nepřesahuje.
• auto: Posuvníky se zobrazí pouze tehdy, když je to nutné (když obsah přesahuje).

Použití:

• Když obsah prvku (například text nebo obrázek) může být větší než stanovené rozměry a je třeba jej spravovat.
• Pro vytváření posuvných oblastí na stránce, například pro seznamy, bloky kódu nebo tabulky.
• Pro oříznutí nežádoucího obsahu, který přesahuje prvek, a zachování původního rozvržení.

Příklad použití overflow: auto; pro blok s omezenou výškou:

.scrollable-block {
  height: 200px; /* Omezení výšky bloku */
  overflow: auto; /* Přidání posuvníků, pokud je obsah větší */
  border: 1px solid #ccc; /* Přidání rámečku pro přehlednost */
  padding: 10px; /* Vnitřní odsazení */
}