Guide To Overflow In CSS

Overflow in CSS refers to content that is too large for an element's box (HTML always creates a rectangular box. The box is made up of four layers: the content itself, padding, a border, and a margin). This happens when the height of a block element is too tiny for the material it contains. The CSS overflow property can be used to modify how the overflow is handled.

What Is CSS?

CSS is an acronym for Cascading Style Sheets. CSS is a style sheet language that is used to create web page layouts and styles. We can use CSS to modify the background image, background color, display color, images, fonts, text size, spacing between the text, text layering, different layouts for different devices, and web page modification for different screen sizes.

CSS aids us in describing the appearance of our web page written in markup languages such as HTML and XML. It includes a simple technique for formatting and editing web page content.

Property of Overflow in CSS

There are a few options for regulating overflow with the CSS overflow attribute. We have three options: allowing the content to render beyond the element's box, clipping the content, or clipping the content and adding a scrollbar. To do so, we need to use the properties mentioned below.

visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary

Now, let us see all the properties in detail.

CSS Overflow: Visible

The overflow will not be trimmed if it is visible. Instead, it will render outside of the element's box, and it will overlap with other page components. The CSS overflow property is set to visible by default. Unless we are overriding CSS in an external stylesheet or elsewhere on our site, we don't need to set the CSS overflow property to "visible."

Example:

CSS Code:

#example1 {

background-color: #EEEEEE;

box-sizing: border-box;

width: 400px;

height: 170px;

padding: 40px;

border: 2px solid #000000;

margin: 15px;

overflow: visible;

}

#example2 {

background-color: #EEEEEE;

box-sizing: border-box;

width: 400px;

padding: 40px;

border: 2px solid #000000;

margin: 15px;

HTML Code:

<h2>CSS Overflow Visible</h2>

<p>Overflow:visible means that the overflow will render outside the element’s box and potentially overlap with other elements on the page, as shown below. Since the CSS overflow property is set to visible by default, we don't have to define it in your CSS. We did it just for the sake of this demo.</p>

<div id="example1">CSS is an acronym for Cascading Style Sheets. CSS is a style sheet language that is used to create web page layouts and styles. We can use CSS to modify the background image, background color, display color, images, fonts, text size, spacing between the text, text layering, different layouts for different devices, and web page modification for different screen sizes.

</div>

<div id="example2">CSS aids us in describing the appearance of our web page written in markup languages such as HTML and XML. It includes a simple technique for formatting and editing web page content.

</div>

}

CSS Overflow: Hidden

Set the overflow property to "hidden" to prevent overflow from rendering outside the element's box. This will clip the content at the padding edge of the box and prevent the user from scrolling or dragging their finger on a touch screen or using any other method to access the information beyond that edge.

CSS Code:

#example1 {

background-color: #EEEEEE;

box-sizing: border-box;

width: 400px;

height: 170px;

padding: 40px;

border: 2px solid #000000;

margin: 15px;

overflow: hidden;

}

#example2 {

background-color: #EEEEEE;

box-sizing: border-box;

width: 400px;

padding: 40px;

border: 2px solid #000000;

margin: 15px;

HTML Code:

<h2>CSS Overflow Hidden</h2>

<p>Overflow:hidden means that the overflow will not render outside the element’s box. Instead, it will be clipped at the box's padding edge. This value differs from "clip" in that it still allows programmatic scrolling, which means the box is technically a scroll container.</p>

</div>

CSS Overflow: Scroll

Set the overflow property to "scroll" to prevent overflow from rendering outside the element's box while allowing users to access the content. The overflow will be trimmed at the padding border of the box. On the other hand, a scrollbar or panner will be introduced so that viewers can scroll to see content that isn't visible.

CSS Code:

#example1 {

background-color: #EEEEEE;

box-sizing: border-box;

width: 400px;

height: 170px;

padding: 40px;

border: 2px solid #000000;

margin: 15px;

overflow: scroll;

}

#example2 {

background-color: #EEEEEE;

box-sizing: border-box;

width: 400px;

padding: 40px;

border: 2px solid #000000;

margin: 15px;

}

HTML Code:

<h2>CSS Overflow Scroll</h2>

<p>Overflow:scroll means that the overflow will be clipped at the box's padding edge, but a scrolling mechanism will be added so that users will be able to scroll to see the content that isn't visible. In the example below, a scrollbar is added. </p>

</div>

CSS Overflow: Auto

The "auto" setting is similar to scroll, but it only adds a scrollbar when the box exceeds its maximum size.

Both divs in the example below are set to overflow:auto. However, only one has a scrollable overflow and a scrollbar. The other, however, does not.

CSS Code:

#example1 {

background-color: #EEEEEE;

box-sizing: border-box;

width: 400px;

height: 170px;

padding: 40px;

border: 2px solid #000000;

margin: 15px;

overflow: auto;

}

#example2 {

background-color: #EEEEEE;

box-sizing: border-box;

width: 400px;

padding: 40px;

border: 2px solid #000000;

margin: 15px;

HTML Code:

<h2>CSS Overflow Auto</h2>

<p>Overflow:auto means that the overflow will be clipped at the box's padding edge, and a scroll bar will be added if necessary. Meaning the box has a scrollable overflow. In the example below, the first div has overflow and, therefore, a scrollbar, and the second div does not. </p>

</div>

CSS Overflow-x

Horizontal overflow, or overflow from the left and right of an element's box, is controlled by the overflow-x attribute.

CSS Overflow-y

Vertical overflow, or overflow from the top and bottom of an element's box, is controlled by the overflow-y property.

CSS Overflow: Wrap

The overflow-wrap property in CSS is used to tell the browser when it can divide a line of text into multiple lines. A string of text that is too long to fit within the line box would be unbreakable without this attribute, resulting in overflow.

The overflow-wrap property can be defined with one of three values. Below is a brief description of each:

Normal - Lines only break at unforced breakpoints, like the space between two words.
Anywhere - Lines may break at forced breakpoints if there are no unforced ones.
Break-word - Lines may break at forced breakpoints if there are no unforced ones. No hyphen is inserted at the breakpoint.

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Conclusion

CSS is a language for describing how Web pages are presented, including colors, layout, and fonts. It enables the presentation to be adjusted for different types of devices, such as huge displays, small screens, etc. CSS may be used with any XML-based markup language and is not dependent on HTML; CSS Overflow makes it an even more powerful tool to use in this modern era. It helps us to modify how the overflow is handled.

If you are interested in learning more about CSS Layout and other related concepts, you can enroll in Simplilearn’s exclusive Full Stack Web Development Certification Course and accelerate your career as a software developer. The program comprises a variety of software development courses, ranging from the fundamentals to advanced topics.

Simplilearn also offers free online skill-up courses in several domains, from data science and business analytics to software development, AI, and machine learning. You can take up any of these courses to upgrade your skills and advance your career.

Program Name	Duration	Fees
Caltech Coding Bootcamp Cohort Starts: 16 Dec, 2024	6 Months	$ 8,000
Automation Test Engineer Masters Program Cohort Starts: 27 Nov, 2024	8 months	$ 1,499
Full Stack Java Developer Masters Program Cohort Starts: 18 Dec, 2024	7 months	$ 1,449
Full Stack (MERN Stack) Developer Masters Program Cohort Starts: 8 Jan, 2025	6 Months	$ 1,449

Table of Contents

What Is CSS?

Property of Overflow in CSS

CSS Overflow: Visible

CSS Overflow: Hidden

CSS Overflow: Scroll

CSS Overflow: Auto

CSS Overflow-x

CSS Overflow-y

CSS Overflow: Wrap

Conclusion

Guide To Overflow In CSS

Table of Contents

What Is CSS?

Property of Overflow in CSS

CSS Overflow: Visible

CSS Overflow: Hidden

CSS Overflow: Scroll

CSS Overflow: Auto

CSS Overflow-x

CSS Overflow-y

CSS Overflow: Wrap

Conclusion

Here's How to Land a Top Software Developer Job

What Is CSS?

Property of Overflow in CSS

CSS Overflow: Visible

Example:

CSS Code:

HTML Code:

Become a Certified UI UX Expert in Just 5 Months!

CSS Overflow: Hidden

CSS Code:

HTML Code:

Here's How to Land a Top Software Developer Job

CSS Overflow: Scroll

CSS Code:

HTML Code:

CSS Overflow: Auto

CSS Code:

HTML Code:

CSS Overflow-x

CSS Overflow-y

CSS Overflow: Wrap

Conclusion

Our Software Development Courses Duration And Fees

Recommended Reads

Get Affiliated Certifications with Live Class programs

Post Graduate Program in Full Stack Web Development

Full Stack Web Developer - MEAN Stack