CSS Overflow

Sometimes the content is bigger than the box that holds it. A long notice in a small box, a wide table in a narrow column, a chat message that keeps growing. The overflow property decides what the browser does with the extra content: let it spill out, cut it off, or add scrollbars.

Diagram — see how it fits together

Overflow only matters when the box has a fixed size — a set width and height. If the box is allowed to grow, the content simply makes it taller and there is nothing to overflow. So the first step is always a fixed height.

Visible — the default, content spills out

overflow: visible is the default. The extra content flows out of the box and overlaps whatever is below it. Nothing is hidden, but the page can look messy — text sitting on top of other text. Use it when you want the content to escape the box on purpose, almost never by accident.

Hidden — cut it off

overflow: hidden clips the extra content at the box's edge. Whatever does not fit simply disappears, and there is no way to scroll to it. It is useful for image cards and banners, where you want a clean edge and you do not care about the cut-off part.

Scroll — always show scrollbars

overflow: scroll adds scrollbars to the box, always — even when the content fits and there is nothing to scroll. The box stays the same size and the visitor can scroll inside it. It looks heavy, so it is rarely the best choice.

Auto — scrollbars only when needed

overflow: auto is the smart one. Scrollbars appear only when the content is actually too big for the box. If everything fits, the box looks plain. This is the value you will use most — for notice boards, chat windows, and long code blocks.

Overflow-x and overflow-y — one direction at a time

Sometimes you want to control the two directions separately. overflow-x handles the sideways direction, overflow-y handles up and down. A notice board usually needs overflow-y: auto — scroll down through the notices, but never sideways.

Syntax — the overflow values

.notice-board {
  width: 300px;
  height: 120px;
  overflow-y: auto;
}
.image-card {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

Common mistakes

• Setting overflow on a box with no fixed height — the box just grows taller and nothing overflows.
• Using overflow: hidden on text the visitor still needs, with no way to scroll to it.
• Using overflow: scroll everywhere, so every box shows grey scrollbars even when empty.
• Forgetting that overflow-x: hidden on the body can break position: sticky further down the page.
• Expecting a horizontal scrollbar from overflow: auto when the real problem is a fixed-width table that needs a wrapper div.

Remember

• Visible lets content spill out; hidden cuts it off; scroll always shows scrollbars; auto shows them only when needed.
• Overflow needs a fixed height — without one, the box just grows.
• overflow-x controls sideways, overflow-y controls up and down.
• overflow: auto is the value you will use most, for notice boards and chat boxes.
• Never hide content with overflow: hidden unless you are sure nobody needs it.

Example explained

• .box { width: 220px; height: 100px; display: inline-block; } — each demo box has a fixed size so the content can overflow, and the four boxes sit side by side.
• .visible { overflow: visible; } — the extra text spills out of the first box and overlaps the text below it.
• .hidden { overflow: hidden; } — the extra text in the second box is cut off at the edge, with no way to scroll to it.
• .scroll { overflow: scroll; } — the third box always shows scrollbars, even though its text is short.
• .auto { overflow: auto; } — the fourth box shows scrollbars only because its text is too long — this is the one to use in real pages.
• .notice { width: 300px; height: 120px; overflow-y: auto; } — the notice board scrolls up and down through the notices, but never sideways.