How to make a div scrollable?

How to make to div vertically scrollable?

To make a <div> vertically scrollable, use the overflow-y CSS property and specify its value to scroll.

First, see the example below and then I will give you the HTML & CSS for it.

Example: vertical scrolling div

For the above example, I have the following HTML & CSS.

HTML

<div class="vertical-scroll">
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat corporis
    minima numquam laboriosam. Natus officia hic architecto fugiat tempora
    ratione cupiditate inventore, quam sapiente corrupti impedit eaque ipsa
    numquam quidem!
  </p>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat corporis
    minima numquam laboriosam. Natus officia hic architecto fugiat tempora
    ratione cupiditate inventore, quam sapiente corrupti impedit eaque ipsa
    numquam quidem!
  </p>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat corporis
    minima numquam laboriosam. Natus officia hic architecto fugiat tempora
    ratione cupiditate inventore, quam sapiente corrupti impedit eaque ipsa
    numquam quidem!
  </p>
</div>

CSS

div.vertical-scroll {
  padding: 10px 5px 10px 20px;
  background-color: #e9ebec;
  margin: 0 auto;
  max-width: 500px;
  max-height: 500px;
  overflow-y: scroll;
}

You can change the width and height based on your choice.

The overflow property has other values such as visible, hidden, and auto.

You can use the overflow-y: auto to automatically handle this. For example, if you have a small amount of content and you don’t need the scrollbar on large screen sizes. And this auto value will handle such situations.

How to make a div horizontally scrollable?

In the same vein, you have to use the overflow-x property in order to make the <div> scrollable horizontally.

See the example below.

For the above example, I have the following HTML & CSS.

HTML

<div class="horizontal-scroll">
  <div class="content">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat corporis
      minima numquam laboriosam. Natus officia hic architecto fugiat tempora
      ratione cupiditate inventore, quam sapiente corrupti impedit eaque ipsa
      numquam quidem!
    </p>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat corporis
      minima numquam laboriosam. Natus officia hic architecto fugiat tempora
      ratione cupiditate inventore, quam sapiente corrupti impedit eaque ipsa
      numquam quidem!
    </p>
  </div>
</div>

CSS

div.horizontal-scroll {
  padding: 10px 5px 10px 20px;
  background-color: #e9ebec;
  margin: 0 auto;
  max-width: 500px;
  max-height: 500px;
  overflow-x: scroll;
}
div.horizontal-scroll .content {
  min-width: 700px;
}

To make a div horizontally scrollable, you need the inner content wider than the container <div>. And this is why I made the .content div 700px which is wider than its wrapper div (.horizontal-scroll). Because the wrapper div has a max-width of 500px.

How to make a div scrollable in both directions?

Example: Horizontal & vertical scrolling div

HTML

<div class="container">
  <div class="content">
    <!-- your actual content goes here -->
  </div>
</div>

CSS

.container {
  max-width: 500px;
  max-height: 500px;
  margin: 0 auto;
  overflow: scroll; /* OR overflow: auto */
}
.container .content {
  min-width: 600px;
}

To make a div scrollable, you can use the CSS overflow property. If you need to make it vertically scrollable, use overflow-y. And for the horizontal scrollbar, use overflow-x. To have scrollbars in both directions, simply use “overflow: scroll” and that’s it.

And it brings me to the end of this post.

Do you need web design help? Feel free to reach out.

I am a freelance web developer helping other developers, designers, and clients. If you need web design-related help, feel free to reach out to me. Always a reasonable price and easy to communicate with.

Contact me on Fiverr See other options