As a software developer, one of the most important skills you can possess is a deep understanding of how to style web pages using CSS. While there are many different CSS properties to master, one of the most powerful and often misunderstood is the overflow property.
In this article, we’ll explore exactly what overflow is, how it works, and how you can use it to create visually stunning and functional web pages.
What is CSS Overflow?
In simple terms, overflow is a CSS property that controls what happens to content that exceeds the dimensions of its containing element. This can happen when you have a block-level element, such as a <div> or <section>, with a fixed height or width, and the content inside that element is larger than the dimensions you’ve set.
Without any additional CSS, the excess content will simply overflow outside of the container, potentially causing layout issues and making the page look unprofessional. But with the overflow property, you can control exactly how this excess content is handled.
How Does CSS Overflow Work?
The overflow property has four possible values:
visiblehiddenscrollauto
Let’s take a look at each of these in turn.
overflow: visible;
By default, the overflow property is set to visible. This means that any content that overflows its containing element will simply be visible outside of the container.
For example, let’s say you have a <div> with a fixed height of 100px, but the content inside the <div> is 200px tall. By default, the excess 100px of content will simply be visible outside of the <div>, potentially causing layout issues.
overflow: hidden;
The overflow: hidden; value tells the browser to simply hide any content that overflows the container. This can be useful if you have elements that are meant to be hidden until a certain event occurs, such as a hover or click.
For example, let’s say you have an image gallery with thumbnail images that expand to full size when clicked. By setting the overflow property of the container to hidden, you can ensure that any excess content (in this case, the full-sized images) will be hidden until the user clicks on the thumbnail.
overflow: scroll;
The overflow: scroll; value tells the browser to add scrollbars to the container if the content overflows the container. This can be useful if you want to allow the user to scroll through the excess content.
For example, let’s say you have a table with many rows of data. By setting the overflow property of the table’s containing element to scroll, you can ensure that the table remains a fixed size, but the user can scroll through the rows to view all of the data.
overflow: auto;
The overflow: auto; value tells the browser to use either scroll or visible depending on whether or not the content overflows the container.
For example, let’s say you have a <div> with a fixed height, but the height of the content inside the <div> can vary depending on the user’s input. By setting the overflow property of the <div> to auto, you can ensure that the content will be visible if it fits within the container, but scrollable if it overflows.
How to Use CSS Overflow in Your Web Pages
Now that you understand how the overflow property works, let’s take a look at some practical examples of how you can use it to create visually stunning and functional web pages.
Creating a Custom Scrollbar
One of the most popular uses of the overflow property is to create custom scrollbars. By default, most browsers use their own scrollbars, which can look out of place on a custom-designed web page.
To create a custom scrollbar, you can use the ::-webkit-scrollbar pseudo-element in combination with the overflow property. Here’s an example:
.scroll-container {
height: 300px;
width: 100%;
overflow-y: scroll;
}
.scroll-container::-webkit-scrollbar {
width: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
}In this example, we’ve set the height of the container to 300px and the width to 100%, which means the container will be as wide as its parent element. We’ve also set the overflow-y property to scroll, which means a vertical scrollbar will appear if the content overflows the container.
To create a custom scrollbar, we’re using the ::-webkit-scrollbar pseudo-element. We’ve set the width of the scrollbar to 8px, and we’re using the ::-webkit-scrollbar-thumb selector to style the scrollbar’s thumb (the part of the scrollbar that the user clicks and drags). Finally, we’re using the ::-webkit-scrollbar-track selector to style the track (the background of the scrollbar).
Creating a Responsive Image Gallery
Another useful application of the overflow property is to create a responsive image gallery. In this example, we’ll use the overflow property to hide full-sized images until the user clicks on a thumbnail.
<div class="gallery">
<div class="thumbnails">
<img src="thumbnail1.jpg" alt="Thumbnail 1">
<img src="thumbnail2.jpg" alt="Thumbnail 2">
<img src="thumbnail3.jpg" alt="Thumbnail 3">
</div>
<div class="full-images">
<img src="fullimage1.jpg" alt="Full Image 1">
<img src="fullimage2.jpg" alt="Full Image 2">
<img src="fullimage3.jpg" alt="Full Image 3">
</div>
</div>.gallery {
display: flex;
}
.thumbnails {
width: 30%;
}
.thumbnails img {
width: 100%;
height: auto;
cursor: pointer;
}
.full-images {
width: 70%;
overflow: hidden;
}
.full-images img {
width: 100%;
height: auto;
display: none;
}In this example, we’re using a simple HTML structure with two <div> elements: one for the thumbnails, and one for the full-sized images. We’re using CSS to display the thumbnails in a column on the left side of the container, and the full-sized images in a column on the right side.
To hide the full-sized images until the user clicks on a thumbnail, we’re using the overflow property with a value of hidden on the container that holds the full-sized images. We’re also using CSS to hide the full-sized images by default, using the display: none; property.
When the user clicks on a thumbnail, we’re using JavaScript to show the corresponding full-sized image by setting its display property to block. Here’s an example of how you could achieve this using jQuery:
// Get all thumbnail images
const thumbnails = document.querySelectorAll('.thumbnails img');
// Get all full-sized images
const fullImages = document.querySelectorAll('.full-images img');
// Attach a click event listener to each thumbnail image
thumbnails.forEach((thumbnail, index) => {
thumbnail.addEventListener('click', () => {
// Hide all full-sized images
fullImages.forEach((fullImage) => {
fullImage.style.display = 'none';
});
// Show the corresponding full-sized image
fullImages[index].style.display = 'block';
});
});
In this function, we’re first getting all of the thumbnail and full-sized images using the querySelectorAll method. We’re then attaching a click event listener to each thumbnail image using the forEach method and an arrow function.
When a thumbnail image is clicked, we’re using another forEach method to hide all of the full-sized images. We’re then showing the corresponding full-sized image by setting its display property to 'block'.
Conclusion
The `overflow` property is a powerful tool in your CSS toolkit that can help you create visually stunning and functional web pages. Whether you’re creating custom scrollbars, responsive image galleries, or just trying to prevent layout issues, understanding how `overflow` works and how to use it effectively is essential.
By using the `overflow` property with a combination of other CSS properties, such as `height`, `width`, and `display`, you can control exactly how content overflows its container, and create web pages that look and feel just right.
So next time you’re styling a web page, don’t forget about the humble `overflow` property – it just might be the key to unlocking your page’s full potential.
📕 Related articles about CSS
- CSS How to Make Responsive: Techniques You Need to Know
- How to Add CSS to HTML: A Comprehensive Guide for Incredible Web Design
- CSS Tooltips: A Comprehensive Guide for Software Developers
- How to make website with HTML and CSS
- Understanding CSS !important: The Definitive Guide
- CSS: How to Make a Responsive Layout
