CSS: How to set container height to smaller value between content size and maximum limit while maintaining scroll functionality?

Other Questions Notion
1

I’m trying to create a container that automatically adjusts its height based on content, but never exceeds a specific maximum value (let’s say 150px for this example). When the content is shorter than 150px, the container should shrink to fit the content. When content is taller than 150px, the container should stay at 150px and allow scrolling.

I thought something like this would work:

height: min(fit-content, 150px);

This would mean “use the smaller value between content height and 150px”. Unfortunately, this approach isn’t supported by browsers.

I tried using max-height and min-height instead of setting a fixed height, but then I lose the scrolling capability when content overflows.

Here’s my current HTML structure (I need to keep this three-div layout):

<div style="position: absolute;
    border: 2px solid gray;
    box-sizing: border-box;
    width: 12rem;
    height: 150px;
    max-height: 150px;
    min-height: fit-content;">
    <div style="position: relative;
        width: 100%;
        height: 100%;">
        <div style="height: 100%; width: 100%; overflow-y: scroll;">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
            <div>Item 4</div>
            <div>Item 5</div>
            <div>Item 6</div>
            <div>Item 7</div>
            <div>Item 8</div>
        </div>
    </div>
</div>

How can I achieve this behavior while keeping the scroll functionality intact?

2

the problem is min-height: fit-content - that’s not how it works. remove the height property entirely and just use max-height: 150px with overflow-y: auto on your outer div. the container will shrink to fit content when it’s small and scroll once it hits the max. works every time.

3

You’re overcomplicating this with all those nested divs. The problem is you’ve got both height: 150px and min-height: fit-content fighting each other. Drop the fixed height and just use max-height: 150px on your outer container. Put overflow-y: auto directly on that same container - skip the inner div completely. This gets rid of the messy nesting and does exactly what you want. The container grows with small content, caps at 150px for larger content, and scrolls automatically. I use this setup all the time for dashboard components with dynamic content.

4

You can keep your three-div setup - no problem there. The real issue is mixing height: 150px with min-height: fit-content. Browsers don’t know what to do with that conflict. Here’s what works: ditch both height and min-height on the outer div, use only max-height: 150px there, then put overflow-y: auto on your innermost scrollable div. Max-height by itself lets the container shrink to fit content while capping it at your limit. I use this all the time for modals and dropdowns where content size varies. The nested divs actually help with positioning when you need absolute positioning on the outer container.