CSS Overflow and Visibility

Learn what happens when content exceeds an element’s dimensions or when an element is hidden.

overflow: visible normally allows content to paint outside a box. hidden clips overflow, and auto makes content scrollable when needed. Horizontal and vertical overflow can be controlled separately.

visibility: hidden hides an element while preserving its layout space. display: none removes it from layout. These choices have different usability and accessibility effects.

Overflow controls the painting/scrolling of content beyond a box. Visibility controls whether an element is painted without necessarily removing its space.

Constrain height and allow overflow to scroll.

HTML

<div class="feed"><p>Message one</p><p>Message two</p><p>Message three</p><p>Message four</p><p>Message five</p></div>

CSS

.feed { height: 90px; overflow-y: auto; padding: 8px; background: #eff6ff; border: 1px solid #bfdbfe; }
.feed p { margin: 6px 0; }

Rendered output

Observe: The list remains in a 90px-tall region and can scroll vertically.

Compare two adjacent labels with an invisible middle item.

HTML

<div class="items"><span>A</span><span class="hidden">B</span><span>C</span></div>

CSS

.items span { display: inline-block; background: #dbeafe; padding: 14px; margin: 3px; }
.hidden { visibility: hidden; }

Rendered output

Observe: The middle label is not painted, but a blank space remains between A and C.

Overflow controls the painting/scrolling of content beyond a box. Visibility controls whether an element is painted without necessarily removing its space.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Clipping overflow can hide keyboard focus rings or necessary content.
• Visibility hidden and display none do not have equivalent layout behavior.

Replace visibility: hidden with display: none. Observe how the empty gap disappears.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Select overflow and visibility settings based on content access and layout needs.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.