Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Making a Div vertically scrollable using CSS

CSS Web Development Front End Technology

Making a div vertically scrollable is essential when content exceeds the container's height, preventing layout disruption and maintaining website responsiveness. This technique allows users to scroll through content within a fixedheight container.

Syntax

selector {
    overflow: value;
    /* or for specific axes */
    overflow-x: value;
    overflow-y: value;
}

Possible Values

Value Description
visible Content overflows the container (default)
hidden Content is clipped, no scrollbar
scroll Always shows scrollbar
auto Shows scrollbar only when needed

Method 1: Using overflow-y Property

This approach hides horizontal scrolling and enables only vertical scrolling 

<!DOCTYPE html>
<html>
<head>
<style>
    .scrollable-div {
        width: 400px;
        height: 150px;
        background-color: #f0f0f0;
        border: 2px solid #333;
        padding: 15px;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: justify;
    }
    
    h2 {
        color: #4CAF50;
        text-align: center;
    }
</style>
</head>
<body>
    <h2>Vertically Scrollable Div Example</h2>
    <div class="scrollable-div">
        This is a vertically scrollable div. When content exceeds the container height, 
        a vertical scrollbar appears automatically. This technique is particularly useful 
        for chat windows, news feeds, product descriptions, or any content area where 
        you want to maintain a fixed layout while allowing users to access overflow content. 
        The overflow-y property is set to auto, which means the scrollbar only appears 
        when necessary. This creates a clean, professional appearance while ensuring 
        all content remains accessible to users.
    </div>
</body>
</html>

A gray bordered container with text content displays. When the text exceeds the 150px height, a vertical scrollbar appears on the right side, allowing users to scroll through the overflow content.

Method 2: Using overflow: auto

This method automatically adds scrollbars (both horizontal and vertical) when content overflows 

<!DOCTYPE html>
<html>
<head>
<style>
    .auto-scroll {
        width: 350px;
        height: 120px;
        background-color: #e8f4fd;
        border: 2px solid #2196F3;
        padding: 10px;
        overflow: auto;
        font-family: Arial, sans-serif;
    }
    
    .container {
        text-align: center;
        margin: 20px;
    }
</style>
</head>
<body>
    <div class="container">
        <h2 style="color: #2196F3;">Auto Overflow Example</h2>
        <div class="auto-scroll">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</body>
</html>

A light blue bordered container displays with Lorem ipsum text. When content exceeds the container dimensions, scrollbars appear automatically on the right side and bottom (if needed) to access overflow content.

Key Points

  • Always specify a fixed height for the container to enable scrolling
  • Use overflow-y: auto for vertical-only scrolling
  • Use overflow: auto for both horizontal and vertical scrolling when needed
  • The auto value only shows scrollbars when content overflows

Conclusion

The CSS overflow property provides an effective way to create scrollable content areas while maintaining layout integrity. Use overflow-y: auto for vertical-only scrolling or overflow: auto for automatic scrollbar generation when content exceeds container boundaries.

Updated on: 2026-03-15T15:44:37+05:30

686 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements