Ce face proprietatea overflow în CSS și în ce cazuri ar trebui utilizată?

Proprietatea overflow în CSS determină modul în care se gestionează conținutul care depășește limitele unui element.

• visible: Conținutul este afișat complet, chiar dacă depășește containerul.
• hidden: Conținutul care depășește containerul este tăiat și nu este vizibil.
• scroll: Barele de derulare (orizontale și verticale) sunt întotdeauna afișate, chiar dacă conținutul nu depășește.
• auto: Barele de derulare apar doar dacă este necesar (când conținutul depășește).

Se utilizează:

• Când conținutul elementului (de exemplu, text sau imagine) poate fi mai mare decât dimensiunile stabilite și este necesar să se gestioneze afișarea sa.
• Pentru a crea zone derulabile în interiorul paginii, de exemplu, pentru liste, blocuri de cod sau tabele.
• Pentru a tăia conținutul nedorit care depășește elementul, păstrând aspectul inițial.

Exemplu de utilizare a overflow: auto; pentru un bloc cu înălțime limitată:

.scrollable-block {
  height: 200px; /* Limităm înălțimea blocului */
  overflow: auto; /* Adăugăm bare de derulare dacă conținutul este mai mare */
  border: 1px solid #ccc; /* Adăugăm o margine pentru claritate */
  padding: 10px; /* Spațiere internă */
}