overflow: visible, hidden, scroll, auto, clip

Cosa succede quando scrivi troppo testo (o inserisci un’immagine troppo grande) in una scatola che ha dimensioni fisse (es. width: 200px; height: 200px;)?

Succede l’Overflow (trabocco, straripamento). Il contenuto supera i limiti fisici della scatola e, di default, viene mostrato lo stesso, espandendosi visivamente oltre i bordi. La proprietà CSS overflow (insieme alle sue varianti overflow-x e overflow-y) decide cosa fare di questa eccedenza.

Vediamo i valori a nostra disposizione.

1. overflow: visible (Il Default)

È il comportamento predefinito. Il contenuto straborda dalla scatola e si sovrappone agli elementi sottostanti, rendendo il layout caotico, ma senza nascondere l’informazione all’utente.

.scatola {
  width: 200px;
  height: 200px;
  overflow: visible; /* Superfluo, è già così */
}

2. overflow: hidden (L’invisibilità)

Dice al browser di tagliare visivamente ciò che esce dalla scatola. Tutto ciò che oltrepassa i confini non viene mostrato. È utile per le card: se hai un’immagine rettangolare in alto in una card con border-radius (angoli arrotondati), gli spigoli dell’immagine possono fuoriuscire. Applicando overflow: hidden alla card genitore, l’immagine viene ritagliata rispettando gli angoli arrotondati.

.card {
  border-radius: 12px;
  overflow: hidden; /* Tutto ciò che esce viene ritagliato */
}

3. overflow: scroll e overflow: auto

Quando vuoi mostrare tutto il contenuto ma senza espandere la scatola e senza nasconderlo.

• scroll: mostra sempre le barre di scorrimento laterali/inferiori sulla scatola, anche se il contenuto ci entra.
• auto: mostra le barre di scorrimento solo se effettivamente il contenuto straborda.

.finestra-chat {
  height: 400px;
  /* Mostra la barra solo quando arrivano troppi messaggi */
  overflow-y: auto; 
}

4. Il nuovo arrivato: overflow: clip

clip è simile a hidden perché ritaglia il contenuto in eccedenza, ma con una differenza tecnica importante: non crea un’area scrollabile. hidden impedisce all’utente di scorrere fisicamente, ma uno script potrebbe comunque modificare lo scroll del contenuto nascosto. clip taglia l’eccedenza senza creare quel meccanismo di scroll.

Riassunto

Se i testi si accavallano al di fuori delle tue card, controlla se hai impostato delle height fisse rigide: spesso è meglio usare min-height. Se il trabocco è voluto, per esempio in una tabella molto larga, avvolgila in un div con overflow-x: auto per creare uno scorrimento orizzontale controllato.

Esercizi

Base · facile

Hai una .card con border-radius: 12px e un’immagine in cima che «sborda» dagli angoli arrotondati. Quale proprietà la fa rispettare la curvatura?

.card {
  border-radius: 12px;
  overflow: hidden;
}

Intermedio · medio

Crea una finestra chat alta 400px che mostra la barra di scorrimento solo quando i messaggi superano l’altezza. Spiega la differenza pratica tra overflow: scroll e overflow: auto in questo caso.

Sfida · difficile

Confronta hidden e clip: entrambi tagliano l’eccedenza, ma uno crea un contenitore di scorrimento programmabile e l’altro no. Descrivi uno scenario in cui questa differenza conta, e spiega quando avvolgere una tabella larga in un wrapper con overflow-x: auto è preferibile a nasconderne il trabocco.