How can I add a vertical scrollbar to my div automatically?

Getting flexible with max-height

Your div should be as flexible as a gymnast in the Olympics. With max-height, your div sizes up content perfectly:

.scrollable-div {
    max-height: 500px; // because, why box yourself in?
    overflow-y: auto;
}


Using max-height avoids empty spaces when the content is shorter than a Napoleon complex.

Friend or Foe: Cross-Browser Compatibility

overflow-y: auto; is a people-pleaser. No CSS attribute has ever been so selfless across browsers. But keep an eye out on the sneaky float: left and width properties. They might shake up your scrollbar party in Firefox and Chrome.

The forever-visible scrollbar

For content-warning enthusiasts who fancy a constant scrollbar reminder, meet your new friend:

.scrollable-div {
    overflow-y: scroll;
}


It's a scrollbar that doesn't know when to leave, even when the div is emptier than my fridge on a Sunday night.

The UX game: auto vs. scroll

To auto or to scroll, that's the question:

• overflow-y: auto;: The scrollbar plays peekaboo — pops up only when necessary, maintaining the clean aesthetic.
• overflow-y: scroll;: The scrollbar is like an itch, always visible but sometimes unnecessary — a see-it-to-believe-it indicator for users.

Overflow: The forethought for future-proofing

When you don't know if the content will show up in a bikini or an overcoat, overflow-y: auto; can be your content strategy's best friend. Overflow management delivers accessible and always readable content.

Overflow and Interactivity, a joyride

What's scarier than a not-working dropdown or a freight-train modal? Manage overflow to stop clunky UI experiences dead on their tracks. overflow-y: auto; keeps scrolling sensible and UI modular.