Making a div vertically scrollable using CSS

css

responsive-design

best-practices

overflow

byAnton Shumikhin·Oct 7, 2024

To provide vertical scrolling capability for a <div>, set the overflow-y property to scroll. This introduces a scrollbar to any <div> whose content surpasses their designated height.

.scrollable-div {
  overflow-y: scroll; // The magic spell for vertical scrolling
  height: 200px; /* Adjust height according to your needs */
}

<div class="scrollable-div">
  Overflowing content here...
</div>

By managing overflow-y and height appropriately, we can enable smooth and user-friendly vertical scrolling in a <div>.

Step-by-step guide

Auto-adapt scrollbars with overflow-y

An adaptive vertical scrollbar appearing only when needed can be achieved with overflow-y: auto;. This helps maintain a clean UI.

Controlling div width

To prevent horizontal scrolling, you can set a fixed width for the div or use percentage values. This ensures a distraction-free vertical scroll experience.

Responsive design with viewport units

Use viewport units like vh (viewport height) to make your div responsive. For instance, max-height: 90vh; prevents the div from exceeding 90% of the viewport height.

Combating horizontal overflow

Couple overflow-y: scroll; with overflow-x: hidden; to disable horizontal scrolling, providing a cleaner user interface solely focused on vertical scrolling.

The overflow shorthand

Streamline your CSS using the overflow shorthand. It's a two-birds-one-stone approach.

.scrollable-div {
  overflow: auto; /* A magic spell again, but an adaptable one */
  height: 300px;
}

This single declaration manages both overflow-x and overflow-y, improving the readability and conciseness of your CSS.

Pro tips and considerations

Customised scrollbar treatment

Fine-tune scrolling experience by adjusting overflow properties:

Set a fixed width or use percent-based width to keep horizontal overflow under control.
Apply max-height with viewport units for a more responsive scrolling area.
Set overflow: auto; to show scrollbars only when needed, reducing interface clutter.

Potential traps to avoid

Here are some common pitfalls to keep in mind:

Content spilling horizontally can trigger unwanted horizontal scroll. Counter this by using white-space: nowrap; or overflow-x: hidden;.
Permanent scrollbars can affect the aesthetic of your layout. Consider using overflow-y: auto;.
Scrollbar appearance varies across browsers. Adjust with custom scrollbar styles, but be mindful of web standards and accessibility.

Granular overflow control

Get the best of both overflow-x and overflow-y for pixel-perfect overflow management:

.scrollable-div {
  overflow-x: hidden; /* No horizontal scrolls, thank you */
  overflow-y: auto;   /* Vertical scroll only when required */
  height: 200px;      /* Flex according to your layout */
}