Cosa fa la proprietà overflow in CSS e in quali casi dovrebbe essere usata?

La proprietà overflow in CSS determina come gestire il contenuto che supera i limiti di un elemento.

• visible: Il contenuto viene visualizzato completamente, anche se supera il contenitore.
• hidden: Il contenuto che supera il contenitore viene tagliato e non visibile.
• scroll: Le barre di scorrimento (orizzontale e verticale) sono sempre mostrate, anche se il contenuto non supera.
• auto: Le barre di scorrimento appaiono solo se necessario (quando il contenuto supera).

Da usare:

• Quando il contenuto dell'elemento (ad esempio, testo o immagine) può essere più grande delle dimensioni impostate e si desidera gestirne la visualizzazione.
• Per creare aree scorrevoli all'interno della pagina, ad esempio per liste, blocchi di codice o tabelle.
• Per ritagliare contenuti indesiderati che superano l'elemento, mantenendo il layout originale.

Esempio di utilizzo di overflow: auto; per un blocco con altezza limitata:

.scrollable-block {
  height: 200px; /* Limita l'altezza del blocco */
  overflow: auto; /* Aggiungi barre di scorrimento se il contenuto è più grande */
  border: 1px solid #ccc; /* Aggiungi un bordo per visibilità */
  padding: 10px; /* Spaziatura interna */
}