Mastering CSS Overflow: Understand Hidden,Scroll,Auto Magic! image

HTMLCSS

Spurgeon Gnan Prakash Tara

admin

Dec 28, 2024

Mastering CSS Overflow: Understanding the Hidden, Scroll, and Auto Magic!

CSS For EveryOne

1.Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

2.Introducing CSS - What is CSS?

3.How to ADD (or) CONNECT our CSS with HTML

4.Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

5.Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

11.Learn CSS Fonts and visualize your website text like a PRO

12.Everything You need to know about Pseudo Classes in CSS

13.Learn CSS display property and Understand the document flow of elements in HTML

14.Mastering CSS Positioning: A Comprehensive Guide to Layout and Element Placement

15.Mastering CSS Overflow: Understanding the Hidden, Scroll, and Auto Magic!

Hello Guys, In this post, we’ll explore an essential CSS property that can save the day when dealing with overflowing content: CSS Overflow. Understanding how to manage content overflow is crucial for maintaining clean, professional designs.

We’ll break down the four versatile values of the overflow property:

visible: The default value where content overflows the container without any restrictions.
hidden: Clips the overflowing content, hiding anything outside the container.
scroll: Adds scrollbars to the container, allowing users to scroll through the overflowing content.
auto: Adds scrollbars only when necessary, depending on the content size.

Stay tuned as we dive deeper into each value and demonstrate how you can use them effectively in your projects!

What is Overflow in CSS

CSS Overflow is a property in Cascading Style Sheets (CSS) that controls what happens when the content of an element overflows its designated area or container. When the content inside an element exceeds the available space, the overflow property determines how it is visually handled.

Types of values that CSS overflow offers

We can use 5 types of values with CSS overflow property. They are:

overflow: visible
overflow: hidden
overflow: scroll
overflow: auto

We will dive deep in to these in a minute. But, before that let's see how our code files and folder structure looks like.

Starter Code

In your machine create a folder named positioning. Within that folder create the following two files.

Create an empty CSS file named styles.css
Create an HTML file named index.html and paste the below code in this file.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Overflow Property</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>CSS Overflow</h1>
    <div class="article article-1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quia
      labore, nostrum quam nemo velit, totam sapiente porro provident quae quod
      adipisci tempore! Itaque dolor blanditiis quod eligendi quis ipsa. Lorem
      ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam placeat, et
      illum ratione possimus numquam totam. Quae, optio beatae possimus eligendi
      nisi iusto, aliquam architecto nihil tenetur laboriosam cumque.
      Exercitationem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Praesentium consequuntur dolorem accusamus. Perspiciatis facilis fugit
      sapiente provident quasi quas. Reprehenderit ipsam eum aut, atque sapiente
      autem corporis deserunt provident officiis! Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Debitis, deserunt, reiciendis praesentium
      odio aspernatur magnam optio necessitatibus corrupti rerum fugiat porro
      explicabo quas similique est odit sit doloribus asperiores dolorem.
    </div>
    <div class="article article-2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat.
    </div>
  </body>
</html>
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30

Now add the below starter css code in your styles.css file.

css
body {
  background-color: #a1ccd1;
}

h1 {
  text-align: center;
}

.article {
  border: 3px solid #e9b384;
  width: 500px;
  height: 80px;
  margin: 1rem auto;
  background-color: #7c9d96;
}

.article-1 {
  color: blue;
}

.article-2 {
  color: yellow;
}
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23

Now save the files and open it in your favourite browser. I recommend using google chrome.

CSS Overflow: Starter Code Preview

As you can see, I had already linked our CSS file with HTML. And In Our HTML, We had a we had a heading and two divs with a paragraph in them. The styling is pretty basic. If you didn't understood any tag from the HTML file, Please visit W3 Schools or MDN Docs and learn about them.

And if you are having hard time understanding the starter CSS code, Please read the previous posts in this series and learn about them. Everything I used here will be explained in detail in those blog posts.

That's it for the folder structure and files. Let's get back to our main concept "CSS Positioning". Let's start with CSS Overflow: Visible

overflow: visible

If you taka a look at our starter code preview, You can see that the content of our .article-1 is overflowing the parent container and the screen looks clumsy because overlapping of content of .article-1 and .article-2. And the overflowing content is visible for us. This is because, By default, our conatainer .article-1 has a default overflow: visible property in it as shown below.

css
div {
    overflow: visible;
}
1 
2 
3

This is the reason, the content that was overflowing our div(.article-1) was visible to us. If we dont want this behavior we can change it using the other overflow values(hidden, scroll, auto).

overflow: hidden

We can change the default behaviorusing hidden value. When we say "overflow: hidden" in our css, the overflowing content within that container will be hidden and will not visible to your end user. Let's try that now.

In your CSS file, lets add overflow: hidden to our first article(.article-1) and hide all the overflowing content as shown below.

css
/* ...Other Styles */

.article-1 {
  color: blue;
  overflow: hidden;
}

/* ...Other Styles */
1 
2 
3 
4 
5 
6 
7 
8

Now Save the file and reload your browser.

CSS overflow - hidden

As you can see, Now all the overflowing content get's hidden from the end user and all our layout looks neat. Sometimes we need this functionality. But not always because we don't want the content to be hidden from the end user. Then the "overflow: scroll" comes to the rescue.

overflow: scroll

The value scroll will also do not let the content to be overflown from its parent container. But it will add a scroll bar so that users can scroll and see the complete content. So let's try that now.

In your CSS file add the below styles to add scroll bar to our first article(.article-1). And also lets comment overflow: hidden.

css
/* ...Other Styles */

.article-1 {
  color: blue;
  /* overflow: hidden; */
  overflow: scroll;
}

/* ...Other Styles */
1 
2 
3 
4 
5 
6 
7 
8 
9

Now save the file and reload your browser and take a look at our content by scrolling down.

CSS Overflow - scroll

As you can see, a scroll bar is added to our container and we can read all the content of it by scrolling down. If you observe the scroll bar is added both horizontally and vertically. Some times we want this behaviour, but actually our content is not overflowing in x-axis horizontally, But it is overflowing vertically in y axis. But why there should be a scroll bar horizontally?. In oredr to remove this unwanted scroll bars, we can use overflow-x, overflow-y. Overflow-x will add scroll bar in x-axis horizontally and Overflow-y will add scroll bar vertically in y-axis. So let's try that now.

Our Content is overflowing vertically, So let's use overflow-y to add scroll bar on y-axis vertically. In your CSS file add the following styles to our first article(.article-1).

css
/* ...Other Styles */

.article-1 {
  color: blue;
  /* overflow: hidden; */
  /* overflow: scroll; */
  overflow-y: scroll;
}

/* ...Other Styles */
1 
2 
3 
4 
5 
6 
7 
8 
9 
10

Now save the file and reload the browser.

CSS overflow-y: scroll

As you can see, now the scroll bar is added only in y-axis vertically.

overflow: auto

Overflow: auto will add scroll bar if the content is overflowing its parent and will not add any scroll bar if the content is not overflowing its parent. Overflow: auto is usefull when we dont know weather the content is going to be overflown or not. If you are adding content of the article dynamically using plain old javascript or through frameworks and libraries like angular,vue and react, etc., then we don't know weather the content will overflow it's parent container or not. In that case auto is the rescue for us. It will adds scroll bar if the content is overflowing and will not add any scroll bar if the content is not overflowing its container. Let's see that in action.

In your CSS file, Let's add the following styles to our second article(.article-2) as shown below.

css
/* ...Other Styles */

.article-2 {
  color: yellow;
  overflow: auto;
}
1 
2 
3 
4 
5 
6

Now save the file and reload your browser.

CSS overflow: auto

As you can see, no scroll bar has been added to this second article. You can use this auto value even with overflow-y and overflow-x as well.

Now lets increase the content to overflow its container to test overflow: auto functionality. Replace the second article(.article-2), with the content given below.

html
<div class="article article-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quia
    labore, nostrum quam nemo velit, totam sapiente porro provident quae quod
    adipisci tempore! Itaque dolor blanditiis quod eligendi quis ipsa. Lorem
    ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam placeat, et
    illum ratione possimus numquam totam. Quae, optio beatae possimus eligendi
    nisi iusto, aliquam architecto nihil tenetur laboriosam cumque.
    Exercitationem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Praesentium consequuntur dolorem accusamus. Perspiciatis facilis fugit
    sapiente provident quasi quas. Reprehenderit ipsam eum aut, atque sapiente
    autem corporis deserunt provident officiis! Lorem ipsum dolor sit amet
    consectetur adipisicing elit. Debitis, deserunt, reiciendis praesentium
    odio aspernatur magnam optio necessitatibus corrupti rerum fugiat porro
    explicabo quas similique est odit sit doloribus asperiores dolorem.
</div>
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15

Now save the file and reload the browser.

CSS Overflow - auto

As you can see, the second article gets an scroll bar to view overflown content.

Finished Code

HTML:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Overflow Property</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>CSS Overflow</h1>
    <div class="article article-1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quia
      labore, nostrum quam nemo velit, totam sapiente porro provident quae quod
      adipisci tempore! Itaque dolor blanditiis quod eligendi quis ipsa. Lorem
      ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam placeat, et
      illum ratione possimus numquam totam. Quae, optio beatae possimus eligendi
      nisi iusto, aliquam architecto nihil tenetur laboriosam cumque.
      Exercitationem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Praesentium consequuntur dolorem accusamus. Perspiciatis facilis fugit
      sapiente provident quasi quas. Reprehenderit ipsam eum aut, atque sapiente
      autem corporis deserunt provident officiis! Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Debitis, deserunt, reiciendis praesentium
      odio aspernatur magnam optio necessitatibus corrupti rerum fugiat porro
      explicabo quas similique est odit sit doloribus asperiores dolorem.
    </div>
    <div class="article article-2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quia
      labore, nostrum quam nemo velit, totam sapiente porro provident quae quod
      adipisci tempore! Itaque dolor blanditiis quod eligendi quis ipsa. Lorem
      ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam placeat, et
      illum ratione possimus numquam totam. Quae, optio beatae possimus eligendi
      nisi iusto, aliquam architecto nihil tenetur laboriosam cumque.
      Exercitationem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Praesentium consequuntur dolorem accusamus. Perspiciatis facilis fugit
      sapiente provident quasi quas. Reprehenderit ipsam eum aut, atque sapiente
      autem corporis deserunt provident officiis! Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Debitis, deserunt, reiciendis praesentium
      odio aspernatur magnam optio necessitatibus corrupti rerum fugiat porro
      explicabo quas similique est odit sit doloribus asperiores dolorem.
    </div>
  </body>
</html>
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42

CSS:

css
body {
  background-color: #a1ccd1;
}

h1 {
  text-align: center;
}

.article {
  border: 3px solid #e9b384;
  width: 500px;
  height: 80px;
  margin: 1rem auto;
  background-color: #7c9d96;
}

.article-1 {
  color: blue;
  /* overflow: hidden; */
  /* overflow: scroll; */
  overflow-y: scroll;
}

.article-2 {
  color: yellow;
  overflow: auto;
}
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27

Conclusion

In this blog post we have learned, How CSS Overflow property works. We had seen how visible, hidden, scroll, auto works with overflow property in CSS. Use auto value as it gives flexibility of adding and not adding scroll bars based on the content of the parent container.

That's it guys, for this blog post. Please give your valuable feedback so that i can improve writing more articles. If you like this blog post, Please share it with your friends and family. Happy Coding!, Peaacee!!

Please signin to view resources

Comments

No Comments Found

Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

Welcome, Learn essential CSS concepts and stay up-to-date with the latest trends and techniques in web design. Join us to enhance your CSS skills today.

Introducing CSS - What is CSS?

Introduction to CSS. What is CSS and How to use it to design your web layouts and components to become a better frontend developer.

How to ADD (or) CONNECT our CSS with HTML

Discover how to connect CSS with HTML using inline, internal, and external stylesheets. This beginner-friendly guide covers methods and examples to style in css

Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Guide for Targeting HTML Elements using HTML Element Selector, ID Selector, Class Selector , Attribute Selector, Universal Selector

Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

CSS Combinators: Selectors, Descendant Combinations, Child Combinations, Sibling Combinations, and More