css - overflow property

The overflow property in CSS controls what happens when content overflows the bounds of its container (i.e., the element's defined width and height).

Syntax

overflow: visible | hidden | scroll | auto;

Values Explained

Value	Description
`visible`	Default. Content overflows and is not clipped — it will spill outside the box.
`hidden`	Content that overflows is clipped (not visible), and no scrollbars are provided.
`scroll`	Content is clipped, but scrollbars always appear, even if not needed.
`auto`	Content is clipped, and scrollbars appear only when needed.

Example

<div class="box">
  <p>Lots of text that might overflow...</p>
</div>

.box 
{

  width: 200px;
  height: 100px;

  overflow: auto;

  border: 1px solid #000;

}

With overflow: auto, scrollbars appear only if the text inside exceeds 100px height.

Overflow Shorthands

overflow-x: controls horizontal overflow
overflow-y: controls vertical overflow

overflow-x: scroll;
overflow-y: hidden;