Consideriamo come possiamo controllare l'overflow del contenuto tramite una sola proprietà. A volte capita di avere una width e una height fisse per l'elemento. Tuttavia, il contenuto interno può essere molto più grande dello spazio disponibile. La proprietà overflow controlla il comportamento del contenuto di un elemento quando supera i valori di height o width impostati esplicitamente per l'elemento.

overflow: visible | scroll | hidden | auto

• visible - è il valore predefinito. Il contenuto oltrepassa i bordi dell'elemento e rimane visibile;
• scroll - Il contenuto oltrepassa i bordi dell'elemento e compare una barra di scorrimento che consente all'utente di scorrere sia verticalmente che orizzontalmente;
• hidden - Il contenuto che oltrepassa le dimensioni dei bordi dell'elemento viene tagliato e non è visibile;
• auto - funziona come scroll. Tuttavia, le barre di scorrimento compaiono solo quando il contenuto oltrepassa i bordi dell'elemento.

Nota

Il contenuto in overflow non influisce sulla geometria degli altri elementi.

visible

Se la proprietà overflow non è impostata, il suo valore predefinito è visible. Significa che il contenuto verrà visualizzato al di fuori dei bordi dell'elemento. Nell'esempio, i bordi della box sono evidenziati in darkblue e la box ha proprietà width e height fisse.

scroll

È possibile visualizzare l'intero contenuto dell'elemento utilizzando una barra di scorrimento. Vediamo l'esempio:

hidden

Tutti i contenuti in overflow saranno nascosti e l’utente non li vedrà mai. Generalmente, è utile solo quando è necessario sviluppare alcuni effetti decorativi.