overflow-***: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O
Type
  • Extension

The overflow-*** property controls what happens to the horizontal or vertical overflow.
(*** = x or y)

  • overflow-x : The horizontal overflow.
  • overflow-y : The vertical overflow.

div {
width: 200px;
height: 100px;
overflow-x: scroll;
overflow-y: scroll;
}
Property Value Explanation
overflow-x
overflow-y		 visible the overflowed content is not clipped (default)
(it is displayed outside the element)
hidden the overflowed content is clipped
(it is not displayed)
scroll the overflowed content is clipped
(it is displayed by the scrolling)
auto if the content overflows, the scrollbar is displayed

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

div {
width: 200px;
height: 100px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px gray solid;
}

#example1 {
overflow-y: scroll;
}
#example2 {
overflow-x: scroll;
white-space: nowrap;
}

</style>

</head>
<body>

<div id="example1">
<p>Vertical scroll</p>
<p>Scroll</p>
...
</div>

<div id="example2">
<p>Horizontal scroll</p>
<p>Scroll, Scroll, Scroll ...</p>
</div>

</body>
</html>
Output

Vertical scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Horizontal scroll

Scroll, Scroll, Scroll, Scroll, Scroll, Scroll, Scroll, Scroll, Scroll, Scroll