Creating a Scrollable Container Showing Only the First Five Items Without Specifying a Fixed Height

When designing intuitive and flexible web layouts, developers often face the challenge of limiting visible content while still allowing users to explore additional items via scrolling. A common approach involves setting a fixed max-height and enabling overflow scroll, but this method can be restrictive and requires explicit height values that might not adapt well to different devices or content changes.

If you prefer a more dynamic and CSS-based solution—one that doesn’t involve JavaScript or hard-coding specific heights—here’s an effective technique. It allows the container to display only the first five items by default and provides a scrollbar for the rest, all through CSS, without setting a fixed height.

The Challenge

Suppose you have an unordered list within a container, and you want:
– Only the first five list items visible initially.
– A scrollbar to appear if there are more than five items.
– No use of JavaScript.
– No fixed height or max-height values in CSS.

The Solution: Using CSS Flexbox and Overflow

While CSS alone does not provide a direct “show first N items” property, it’s possible to achieve this with some clever use of layout techniques:

Approach Overview:

• Wrap the list in a container that has overflow-y: auto;.
• Limit the height dynamically based on the size of 5 list items.

Because we avoid fixed heights, the key idea is:

• Use CSS max-height set to calc() based on the height of individual list items.
• Slightly more advanced, but still clean, is to rely on the natural flow and create a container that shows only part of the list initially, with a scrollbar for the rest.

Practical Implementation

Step 1: Style the Container

css
.scroll-container {
display: block;
overflow-y: auto;
/* Do not specify a fixed height here */
}

Step 2: Style the List Items

Ensure list items have consistent heights:

“`css
ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
min-height: 20px; / or an appropriate height for your content /
/ optional: add padding or border for aesthetics /
}
“`

Step 3: Apply a Dynamic Height

Since we don’t want to specify a fixed height, we can