【CSS】Basic Scroll Display｜How to Use overflow-scroll
This article explains how to use the CSS overflow-scroll property to display a scrollbar when content overflows. It is very useful when you want to display content inside a fixed-size element and allow scrolling.
🔹 Code Example
<div class="container">
<div class="content">The content will appear here. Scrollbars will be shown.</div>
</div>
<style>
.container {
width: 100%;
height: 150px;
border: 2px dashed #000;
overflow: scroll;
}
.content {
height: 300px;
background-color: #f0f0f0;
}
</style>
💻 Full Working Code (Copy and Paste for Immediate Use)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll Example</title>
<style>
.container {
width: 100%;
height: 150px;
border: 2px dashed #000;
overflow: scroll;
}
.content {
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="content">The content will appear here. Scrollbars will be shown.</div>
</div>
</body>
</html>
🧩 Applications and Use Cases
overflow: scroll; is used when you want to display a scrollbar when content overflows an element. This is useful for ensuring that users can view all content inside a fixed-size element.
📱 Responsive Design
In responsive design, overflow: scroll; is often used to display a scrollbar on smaller screens such as smartphones or tablets. You can also use @media queries to switch the display based on specific screen sizes.
Scrollbars are very useful, especially when dealing with long lists or complex content, as they allow the content to fit into the available space without affecting the layout of other elements.