Čo robí vlastnosť overflow v CSS a v akých prípadoch by sa mala použiť?

Vlastnosť overflow v CSS určuje, ako sa má zaobchádzať s obsahom, ktorý presahuje hranice prvku.

• visible: Obsah sa zobrazí úplne, aj keď presahuje kontajner.
• hidden: Prebytočný obsah, ktorý presahuje kontajner, je orezaný a nie je viditeľný.
• scroll: Vždy sa zobrazia posuvné lišty (horizontálne a vertikálne), aj keď obsah nepresahuje.
• auto: Posuvné lišty sa zobrazia iba v prípade potreby (keď obsah presahuje).

Použitie:

• Keď obsah prvku (napríklad text alebo obrázok) môže byť väčší ako stanovené rozmery a je potrebné spravovať jeho zobrazenie.
• Na vytvorenie posuvných oblastí na stránke, napríklad pre zoznamy, bloky kódu alebo tabuľky.
• Na orezanie nechceného obsahu, ktorý presahuje prvok, aby sa zachoval pôvodný rozloženie.

Príklad použitia overflow: auto; pre blok s obmedzenou výškou:

.scrollable-block {
  height: 200px; /* Obmedzíme výšku bloku */
  overflow: auto; /* Pridáme posuvné lišty, ak je obsah väčší */
  border: 1px solid #ccc; /* Pridáme rámček pre viditeľnosť */
  padding: 10px; /* Vnútorný odstup */
}