How to Make a Div Horizontally Scrollable using CSS

In this example, we will learn how to make a div horizontally scrollable using CSS. We can use the overflow-x property to make a div horizontally scrollable when its content overflow on the x-axis of the div.

Prerequisites

• CSS width property
• CSS height property
• CSS overflow-x property

Example

HTML

        <div class="make-this-scroll">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum debitis magnam natus, sed ratione voluptatem
            laudantium quam recusandae illum architecto, aliquid porro error et, esse inventore fugiat incidunt rem
            provident. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem repellendus veritatis neque autem
            voluptatibus. Eaque laborum, assumenda minus sapiente sed incidunt numquam tenetur alias doloribus porro,
            aut quam iste labore.
        </div>

CSS

        <div class="make-this-scroll">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem provident consectetur sint maxime
                sunt doloribus ab mollitia nam unde velit laboriosam quisquam, dolorem numquam. Sit corporis ducimus et
                velit cum!
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem provident consectetur sint maxime
                sunt doloribus ab mollitia nam unde velit laboriosam quisquam, dolorem numquam. Sit corporis ducimus et
                velit cum!
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem provident consectetur sint maxime
                sunt doloribus ab mollitia nam unde velit laboriosam quisquam, dolorem numquam. Sit corporis ducimus et
                velit cum!
            </p>
        </div>

Output

Here, we made a div with a height of 200px and width 200px. Whenever the content exceeds the element box, it overflows. So, to decide what to do when the content overflows we can use the overflow property. Here, the overflow-x property is set to make the overflowed contents scroll horizontally.

Conclusion

In this example, we learned how to make a div horizontally scrollable using CSS. We used the height and width property to set an element's box and the overflow-x property to make a div horizontally scrollable when its content overflow on the x-axis of the element's box.