Overflow in Specific Directions
The overflow-x and overflow-y properties let you control overflow separately for the horizontal and vertical directions.
CSS overflow-x and overflow-y
The overflow-x and overflow-y properties set what happens to overflow just horizontally or just vertically (or both).
overflow-xhandles the left and right edges of the content.overflow-yhandles the top and bottom edges of the content.
Example
The horizontal scrollbar is hidden and a vertical scrollbar is added.
Prompt
An HTML page that hides the horizontal scrollbar and shows a vertical one.
In an internal
<style> block, give a <div> a width, height, and coral background, with overflow-x hidden and overflow-y scroll. Put more text inside than fits vertically.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 100px;
background-color: coral;
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</body>
</html>
Common Use Cases
These properties help when you need different scroll behavior in each direction, for example: overflow-x: auto for wide tables, overflow-y: scroll for chat windows, and overflow-x: auto for code blocks with long lines.
Example
Only a horizontal scrollbar is shown.
Prompt
An HTML page that shows only a horizontal scrollbar.
In an internal
<style> block, give a <div> a width, height, and coral background, with overflow-x scroll and overflow-y hidden, and keep the text on one line (white-space nowrap) so it overflows sideways.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 100px;
background-color: coral;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. This long line of text stays on one line and scrolls sideways.</div>
</body>
</html>