Laten we bekijken hoe we het overlopen van inhoud kunnen beheersen met behulp van één eigenschap. Soms komt het voor dat we een vaste width en height van het element hebben. Echter, de interne inhoud is veel groter dan de beschikbare ruimte. De eigenschap overflow bepaalt het gedrag van de inhoud van een element wanneer deze de expliciet ingestelde height of width overschrijdt.

overflow: visible | scroll | hidden | auto

• visible - is de standaardwaarde. De inhoud loopt buiten de randen van het element en blijft zichtbaar;
• scroll - De inhoud loopt buiten de randen van het element, en er verschijnt een schuifbalk waarmee een gebruiker zowel verticaal als horizontaal kan scrollen;
• hidden - De inhoud die buiten de randen van het element valt, wordt afgekapt en is niet zichtbaar;
• auto - werkt hetzelfde als scroll. Echter, de schuifbalken verschijnen alleen wanneer de inhoud buiten de randen van het element valt.

Opmerking

De overlappende inhoud heeft geen invloed op de geometrie van andere elementen.

visible

Als de eigenschap overflow niet is ingesteld, is de standaardwaarde visible. Dit betekent dat de inhoud buiten de randen van het element wordt weergegeven. In het voorbeeld zijn de randen van de box gemarkeerd in darkblue, en de box heeft vaste eigenschappen voor width en height.

scroll

De volledige inhoud van het element is zichtbaar met behulp van een scrollbalk. Bekijk het voorbeeld:

hidden

Alle overlopende inhoud wordt verborgen en is nooit zichtbaar voor de gebruiker. Dit is doorgaans alleen nuttig wanneer decoratieve effecten ontwikkeld moeten worden.