CSS: How to Enable Scroll in a div – Manage Overflow Like a Pro

Sometimes, content inside a <div> can exceed the size of its container, making it overflow and possibly break your layout. Instead of letting content spill out, you can enable scrolling within the <div> using CSS. This gives you control over your page structure while keeping the user experience neat and responsive.

In this guide, you’ll learn how to enable scrollbars in a <div> using CSS, along with the different scrolling options.

Table of Contents

✅ Use the `overflow` Property

The key CSS property that controls scrolling behavior is:

overflow

It determines what happens when the content overflows the element’s box.

✅ Example 1: Enable Vertical and Horizontal Scrolling

.scroll-box {
  width: 300px;
  height: 150px;
  overflow: scroll;
  border: 1px solid #ccc;
}

📌 HTML:

<div class="scroll-box">
  <!-- Long content here -->
</div>

✅ Result:

Both vertical and horizontal scrollbars appear regardless of content size.

✅ Example 2: Enable Scroll Only When Needed

Use auto to show scrollbars only if the content overflows:

.scroll-box {
  width: 300px;
  height: 150px;
  overflow: auto;
}

This is cleaner and prevents unnecessary scrollbars when they aren’t needed.

✅ Example 3: Enable Only Vertical or Horizontal Scrolling

📌 Vertical Scroll Only:

.scroll-box {
  height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
}

📌 Horizontal Scroll Only:

.scroll-box {
  width: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap; /* helps prevent content wrapping */
}

✅ Example 4: Hide Scrollbars (But Still Scrollable)

To allow scrolling without visible scrollbars:

.scroll-box {
  overflow: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE 10+ */
}

.scroll-box::-webkit-scrollbar {
  display: none;               /* Chrome, Safari */
}

⚠️ Use with caution—hidden scrollbars may affect accessibility and usability.

🧾 Summary

Goal	CSS Property
Always show scrollbars	`overflow: scroll;`
Show scrollbars only if needed	`overflow: auto;`
Enable vertical scrolling only	`overflow-y: scroll; overflow-x: hidden;`
Enable horizontal scrolling only	`overflow-x: scroll; overflow-y: hidden;`
Hide scrollbars but allow scrolling	Use `::-webkit-scrollbar` and `scrollbar-width`

🧠 Conclusion

Enabling scroll inside a <div> with CSS is simple yet powerful. With the overflow property and its variants, you can control how your content behaves, making sure your design remains clean, responsive, and user-friendly.

Pro Tip: When creating scrollable content, consider adding padding to improve readability and make sure interactive elements are not hidden behind scrollbars.

✅ Use the overflow Property