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 |
<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>
Vertical scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Scroll
Horizontal scroll
Scroll, Scroll, Scroll, Scroll, Scroll, Scroll, Scroll, Scroll, Scroll, Scroll