Make div scrollable

html

responsive-design

css

best-practices

byNikita Barsukov·Jan 14, 2025

Straight to action! To render a div scrollable, we utilize CSS's overflow-y property:

.scrollable {
  max-height: 450px; /* Maximum limit, like your credit card! */
  overflow-y: auto; /* Yes, auto-magic scrolling! */
}

So, just sprinkle that magic into your div:

<div class="scrollable">
  Content galore triggering scroll...
</div>

Voila! Say hello to your scrollbar when the content outgrows the div height.

Taming the overflow

It's all about managing overflow like your budget. Understanding this CSS property is a game-changer. Let's untangle your options:

overflow: scroll - The scrollbar is ever-present, no matter the content size.
overflow: auto - Scrollbars make a grand entrance only when needed.
overflow: hidden - Surplus content is invisible, tucked away out of sight.
overflow: visible - Even the surplus content gets some spotlight.

To make UIs fluid, using percentages for height can be beneficial:

.scrollable-responsive {
  max-height: 75vh; /* Clever use of viewport height */
  overflow-y: auto;
}

Keeping the box model in check

When setting the div size, don't forget the space occupied by padding, margins, and borders:

.scrollable {
  max-height: 450px; /* Adjusted to factor in box model attributes */
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  overflow-y: auto;
}

Deduct these values in the max-height to avoid any overflow sneak attacks.

Design adaptive scrollbars

Adjoined with media queries, your div will appear contented, fitting in with every device out there:

.scrollable {
  max-height: 450px;
  overflow-y: auto;
}

/* A little tweak for smaller screens */
@media (max-width: 600px) {
  .scrollable {
    max-height: 300px;
  }
}

Taking the reigns with positioning

On certain occasions, a div’s scrolling behavior needs to be paired with positioning properties:

float: left to make elements stick to the left.
Implement position: relative or absolute with top, right, bottom, left for surgical positioning.
For bundles of joy like flexbox or grid, if you want to show off a bit.

Let emulation lead you in a two-column layout:

.container {
  display: flex; /* Comes together like a team */
}

.scrollable {
  flex: 1; /* Takes up the remaining space */
  max-height: 450px;
  overflow-y: auto;
}