CSS Overflow Property. The CSS Overflow property constantly determined what will appear if the content of the webpage overflowed from an elements box space. This property defines whether surely positioned elements content (clip content) or add a scrollbar to the content, if at all if the content is too big to align inside the specified box section. This property generally has 4 values that are frequently used in the application, they are auto, hidden, scroll, and visible.
Read Also: CSS Transform() Property.
What is Overflow in CSS?
Overflow is the property in CSS (Cascading Style Sheets). Which is used to fit the content correctly from overflowing when the content is too big to fit within the specified area. Overflow property has 4 values, which are used always in our application & they are…
Read Also: CSS Translate Property.
- overflow: scroll;
- overflow: auto;
- overflow: hidden;
- overflow: visible;
CSS Overflow Scroll
This property will add a scroll bar to the extra content of the element.
<h2>CSS Overflow Scroll</h2>
<div class="overflow">You can add the overflow property when you require to have better control of the layout. The overflow property defines what appears if content overflows an element's box.scroll..</div>
<style>
.overflow {
background-color: #ddd;
width: 200px;
height: 50px;
border: 5px solid #eee;
overflow: scroll;
}</style>CSS Overflow Auto
This property did auto value is automatically giving a scrollbar if the content is not fit within the width.
<h2>CSS Overflow Auto</h2>
<div class="overflow">You can add the overflow property when you require to have better control of the layout. The overflow property defines what appears if content overflows an element's box.auto..</div>
<style>
.overflow {
background-color: #ddd;
width: 200px;
height: 50px;
border: 5px solid #eee;
overflow: auto;
}</style>CSS Overflow Hidden
This Property will specify a portion of the content only and the rest of the content will
<h2>CSS Overflow Hidden</h2>
<div class="overflow">You can add the overflow property when you require to have better control of the layout. The overflow property defines what appears if content overflows an element's box.hidden..</div>
<style>
.overflow {
background-color: #ddd;
width: 200px;
height: 50px;
border: 5px solid #eee;
overflow: hidden;
}</style>CSS Overflow Visible
This visible is the default value for the overflow property. Which works the same as a scroll.
<h2>CSS Overflow visible</h2>
<div class="overflow">You can add the overflow property when you require to have better control of the layout. The overflow property defines what appears if content overflows an element's box.visible..</div>
<style>
.overflow {
background-color: #ddd;
width: 200px;
height: 150px;
border: 5px solid #eee;
overflow: visible;
}</style>CSS Overflow-X and Overflow-Y
<h2>CSS Overflow X and OverFlow y</h2>
<div class="overflow">You can add the overflow property when you require to have better control of the layout. The overflow property defines what appears if content overflows an element's..</div>
<style>
.overflow {
background-color: #ddd;
width: 200px;
height: 50px;
border: 5px solid #eee;
overflow-x:hidden;
overflow-y: scroll;
}</style>That’s It. So, We can use to CSS overflow property to manage content. For example, if we want to show the user big content but in a small space then we have to use CSS scroll property if we want that user couldn’t see full content then we specify width and height and put content into it and add CSS property overflow: none;
Have a nice day.