overflow: hidden, scroll, auto, clip

overflow controlla cosa accade quando il contenuto di un elemento supera le dimensioni definite. Si applica contemporaneamente a entrambi gli assi (oppure usi overflow-x/overflow-y per controllare ogni asse separatamente).

visible (predefinito): il contenuto viene visualizzato all'esterno del riquadro. Non crea un Block Formatting Context (BFC). Altri elementi possono sovrapporsi al contenuto che fuoriesce.

hidden ritaglia il contenuto in corrispondenza del bordo del riquadro. Crea un BFC, che contiene gli elementi flottanti e impedisce il collasso dei margini. È il valore più comune per i contenitori di immagini con angoli arrotondati.

scroll mostra sempre le barre di scorrimento (sugli assi che le supportano), indipendentemente dal fatto che il contenuto fuoriesca o meno. È utile per interfacce coerenti in cui le canaline delle barre di scorrimento devono essere sempre presenti per evitare spostamenti del layout.

auto mostra le barre di scorrimento solo quando il contenuto fuoriesce effettivamente. È preferibile a scroll per la maggior parte dei contenitori scorrevoli, perché evita di visualizzare barre di scorrimento non necessarie.

clip ritaglia il contenuto come hidden, ma NON crea un BFC. Ciò significa che non influisce sul contenimento degli elementi flottanti né sul collasso dei margini. Lo usi quando desidera ritagliare il contenuto senza gli effetti collaterali del BFC.

Controlli ogni asse separatamente. Un pattern molto comune consiste nell'usare lo scorrimento orizzontale per i contenuti larghi (tabelle, codice), lasciando visibile il contenuto che fuoriesce verticalmente:

Impostare overflow su un valore diverso da visible e clip crea un Block Formatting Context. Questo contiene gli elementi flottanti interni, impedisce la propagazione del collasso dei margini e stabilisce un nuovo contesto di scorrimento.

overflow: overlay disegna la barra di scorrimento sopra il contenuto invece di riservarle spazio nel layout. Era un valore non standard in alcuni browser e viene deprecato a favore delle moderne tecniche di personalizzazione delle barre di scorrimento.

La nuova proprietà scrollbar-gutter: stable riserva spazio per la barra di scorrimento anche quando non è necessaria, impedendo spostamenti del layout quando il contenuto diventa scorrevole.

Un bug comune: un elemento figlio con position: fixed all'interno di un elemento con overflow: hidden si comporta come se avesse position: absolute: la posizione fissa è relativa al blocco contenitore e l'overflow crea un nuovo contesto di sovrapposizione.

visible (predefinito) consente al contenuto di fuoriuscire. hidden ritaglia il contenuto e crea un BFC. scroll mostra sempre le barre di scorrimento. auto le mostra solo quando necessario (ed è il valore preferibile). clip ritaglia il contenuto senza creare un BFC. Usi overflow-x/y per controllare ogni asse separatamente. Usi scrollbar-gutter: stable per evitare spostamenti del layout.