In order for the scroll to appear, you need to limit its height by adding height or max-height properties.
.scroll-area {
overflow-y: auto;
max-height: 400px;
}
If you do not add this, your block will stretch to the entire height.
Read next
How to make truncate text in CSS
CSS has no truncate property. How to clip overflowing text with text-overflow: ellipsis, and what each property in the recipe is doing.
Create a Triangle in Pure CSS - No JavaScript
Draw triangles in CSS using only the border trick - no images, no JS. Step-by-step code for up, down, left, and right arrows you can copy today.
How to use Linear-Gradient in CSS
The CSS linear-gradient function creates an image that consists of a progressive transition between two or more colors along a straight line.
Tell us what you need built
JetThoughts has been building software since 2008. Book a call, or write to sales@jetthoughts.com. You'll leave the call with a written one-page scope within 2 working days.
A 30-minute call; pick a time.