Mit csinál az overflow tulajdonság a CSS-ben, és milyen esetekben kell használni?

A overflow tulajdonság a CSS-ben meghatározza, hogyan kezeljük a tartalmat, amely kilép egy elem határain.

• visible: A tartalom teljes egészében megjelenik, még akkor is, ha kilép a konténerből.
• hidden: A konténeren kívüli tartalom levágódik és nem látható.
• scroll: Mindig megjelennek a görgetősávok (vízszintes és függőleges), még akkor is, ha a tartalom nem lépi túl a határokat.
• auto: A görgetősávok csak akkor jelennek meg, ha szükséges (amikor a tartalom kilép).

Alkalmazás:

• Amikor az elem tartalma (pl. szöveg vagy kép) nagyobb lehet, mint a beállított méretek, és kezelni kell a megjelenítését.
• Görgethető területek létrehozására az oldalon, például listák, kódrészek vagy táblázatok számára.
• Nem kívánt tartalom vágására, amely kilép az elem határain, hogy megőrizze az eredeti elrendezést.

Példa a overflow: auto; használatára egy korlátozott magasságú blokk esetén:

.scrollable-block {
  height: 200px; /* A blokk magasságának korlátozása */
  overflow: auto; /* Görgetősávok hozzáadása, ha a tartalom nagyobb */
  border: 1px solid #ccc; /* Keret hozzáadása láthatóságért */
  padding: 10px; /* Belső margó */
}