Lad os overveje, hvordan vi kan kontrollere indholdets overløb ved hjælp af én egenskab. Det sker nogle gange, at vi har et fastsat width og height på elementet. Dog er det indre indhold meget større end den tilgængelige plads. Egenskaben overflow styrer, hvordan et elements indhold opfører sig, når det overstiger de eksplicit angivne værdier for height eller width.

overflow: visible | scroll | hidden | auto

• visible - er standardværdien. Indholdet flyder ud over elementets kanter og forbliver synligt;
• scroll - Indholdet flyder ud over elementets kanter, og der vises en scrollbar, som gør det muligt for brugeren at rulle både vertikalt og horisontalt;
• hidden - Indhold, der flyder ud over elementets kantstørrelse, bliver skåret væk og er ikke synligt;
• auto - fungerer på samme måde som scroll. Dog vises scrollbars kun, når indholdet flyder ud over elementets kanter.

Bemærk

Det overløbende indhold påvirker ikke geometrien for de andre elementer.

visible

Hvis egenskaben overflow ikke er angivet, er dens standardværdi visible. Det betyder, at indholdet vil blive vist uden for elementets kanter. I eksemplet er boksens kanter fremhævet med darkblue, og boksen har faste egenskaber for width og height.

scroll

Det er muligt at se hele elementets indhold ved hjælp af en scrollbar. Se eksemplet nedenfor:

hidden

Alt overløbende indhold vil blive skjult, og brugeren vil aldrig se det. Generelt er det kun nyttigt, når der skal udvikles dekorative effekter.