Tailwind CSS Overflow

Basic example

Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.

This is an example of using .overflow-hidden on an element with set width and height dimensions.

This is an example of using .overflow-visible on an element with set width and height dimensions.

This is an example of using .overflow-scroll on an element with set width and height dimensions.

HTML

        
            
        <div class="overflow-auto">...</div>
        <div class="overflow-hidden">...</div>
        <div class="overflow-visible">...</div>
        <div class="overflow-scroll">...</div>

More examples

Hide or show overflowing content using the .overflow-visible or .overflow.hidden classes.

Overflow visible

Overflow hidden

HTML

        
            
        <div class="overflow-visible">...</div>
        <div class="overflow-hidden">...</div>

Scrolling if needed

Use .overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike .overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

The city pulses with energy as a vibrant tapestry of life unfolds before our eyes. Skyscrapers stretch towards the heavens, their glass facades reflecting the dazzling sunlight. Streets teem with a kaleidoscope of people, each with their own story and purpose. Amidst the urban symphony, the scent of freshly brewed coffee mingles with the aroma of international cuisines, enticing passersby to savor culinary delights. Neon lights illuminate the night, casting a vibrant glow on bustling sidewalks and lively cafes. Wandering through the city's heart, we discover hidden gems tucked away in narrow alleyways—a charming bookstore, a lively street art mural, or a tranquil park providing respite from the urban hustle. The rhythm of life here is palpable, echoing through the laughter, the honking of taxis, and the melodies drifting from street performers.

HTML

        
            
        <div class="overflow-auto">...</div>

Scrolling always

Use .overflow-scroll to add scrollbars to an element. Unlike .overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting.

In the urban embrace, a symphony of life unfolds with rhythmic energy. Skyscrapers soar, casting long shadows over bustling streets that pulse with vibrant diversity. The aroma of international cuisine wafts through the air, enticing curious taste buds. Neon lights dance, illuminating the night as laughter and music intertwine. Each corner holds a story, waiting to be discovered—a hidden cafe, a vibrant street market, or a park offering moments of respite. In this dynamic cityscape, dreams take flight, and possibilities know no bounds, creating an ever-evolving tapestry of inspiration and discovery.

HTML

        
            
        <div class="overflow-scroll">...</div>

Scrolling horizontally always

Use .overflow-x-scroll to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

Urban rhythm pulses, vibrant streets hum, a symphony of diversity embracing endless possibilities.

HTML

        
            
        <div class="overflow-visible">...</div>
        <div class="overflow-hidden">...</div>

Scrolling vertically always

Use .overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

Within the bustling cityscape, a vibrant tapestry of cultures intertwines, igniting a sense of boundless exploration and creative inspiration.

HTML

        
            
        <div class="overflow-visible">...</div>
        <div class="overflow-hidden">...</div>

Overflow

Basic example

More examples

Scrolling if needed

Scrolling always

Scrolling horizontally always

Scrolling vertically always

Access restricted

To view this section you must have an active PRO account

Overflow

Tailwind CSS Overflow

Basic example

More examples

Scrolling if needed

Scrolling always

Scrolling horizontally always

Scrolling vertically always

Related resources