CSS overflow-x: visible and overflow-y: hidden causing scrollbar issue
Last Updated :
11 Apr, 2023
CSS overflow-x and overflow-y attributes are used to limit content overflow in the horizontal and vertical directions, respectively. The scrollbar may show on the page even when there is nothing to scroll when overflow-x is set to “visible” and overflow-y is set to “hidden”.
Syntax:
overflow-x: visible | hidden | scroll | auto | initial | inherit;
overflow-y: visible | hidden | scroll | auto | initial | inherit;
Approach: To avoid the scrollbar issue caused by setting overflow-x to “visible” and overflow-y to “hidden”, there are a few approaches that can be used.
- Using overflow: hidden instead of overflow-y: hidden: This will hide both the horizontal and vertical overflow and prevent the scrollbar from appearing unnecessarily.
- Using overflow-x: scroll instead of overflow-x: visible: This will only show the scrollbar when there is content to scroll horizontally and prevent it from appearing unnecessarily.
Example 1: This example demonstrates the first approach using overflow: hidden property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Example with CSS overflow:hidden</ title >
< style >
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
.content {
width: 645px;
height: 300px;
background-color: #ccc;
}
</ style >
</ head >
< body >
< div class = "container" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >CSS overflow hidden property</ h3 >
< div class = "content" >
This is the content which will
show overflowing text using CSS property.
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example demonstrates the second approach using overflow-x: scroll property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Example with overflow-x: scroll</ title >
< style >
.container {
width: 300px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
}
.content {
width: 645px;
height: 300px;
background-color: #ccc;
}
</ style >
</ head >
< body >
< div class = "container" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 > CSS overflow-x: scroll </ h3 >
< div class = "content" >
This is the content which will
show overflowing-x scroll using
CSS property.
</ div >
</ div >
</ body >
</ html >
|
Output:
In conclusion, the CSS overflow-x: visible; and overflow-y: hidden; the combination can cause a scrollbar issue on the page. To avoid this, we can use either overflow: hidden or overflow-x: scroll instead.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...