CSS Template: Fixed Height with Scrollable Content
📝 Use Case
This template is useful when you want to restrict the height of elements like long texts or lists and make them scrollable. Ideal for chat logs, console output, or notifications.
📘 Explanation
By setting a max-height and applying overflow: auto;, any content that exceeds the maximum height will become scrollable inside the element.
✅ Demo
This is a scrollable area.
As more lines are added, a scrollbar will appear automatically.
Example: 1
Example: 2
Example: 3
Example: 4
Example: 5
Example: 6
Example: 7
📄 Code (Partial)
<style>
.scroll-box {
max-height: 150px;
overflow: auto;
border: 1px solid #ccc;
padding: 1rem;
background-color: #fafafa;
}
</style>
<div class="scroll-box">
<p>Scrollable content here</p>
</div>
📦 Code (Full HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Height with Scroll</title>
<style>
.scroll-box {
max-height: 150px;
overflow: auto;
border: 1px solid #ccc;
padding: 1rem;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="scroll-box">
<p>This is a scrollable area.</p>
<p>More content will trigger scrolling.</p>
<p>Example: 1</p>
<p>Example: 2</p>
<p>Example: 3</p>
<p>Example: 4</p>
</div>
</body>
</html>
🧩 Applications and Usage
This scroll box template can be used in various scenarios. By adjusting the value of max-height, you can change the visible area size as needed. For example, set max-height: 300px; for mobile display, or max-height: 100px; for a compact UI — it can be flexibly adapted to different situations.
📱 Responsive Design Tips
By combining it with media queries, you can set optimal heights for different devices. For instance, writing @media (max-width: 768px) { .scroll-box { max-height: 200px; } } allows you to adjust the height for smartphone displays.
🎨 Design Customization
If you want to change the appearance of the scrollbar, use the ::-webkit-scrollbar pseudo-element. For example, .scroll-box::-webkit-scrollbar { width: 8px; } adjusts the scrollbar width. You can also freely customize background color, border radius, and more.
Note that using overflow: scroll; instead of overflow: auto; will always show the scrollbar, even when content is short. Choose accordingly based on your needs.
This technique can be applied to components such as sidebar navigation, dashboard widgets, or long content within modals. It’s especially useful when you want to display content efficiently in limited space.