“Bouncing effect” with cubic-bezier (or similair), when not having explicit height for elelement

I want to have HTML element to expand downwards and at the end I would like it to do a little bounce, something like cubic-bezier function could do.

So I have set transition: height ... in CSS to animate changes in height property of the element. However it works only when I have height set explicitly, and not as 100vh to just contain all elements.

To present it better, here are example: when the green container has max-height less then its actual height (to contain its children), then the effect is visible and working. But then I don’t rely of automatic sizing of the container to fit it’s children.

When I specify something “big enough” to accomodate all possible children, then of course, “bouncing effect” does not work, as it “bounces” when reaching the “big enough” height, making the effect not visible.

You can observe the issue by specifying different height in below snippet (3rem or below – works, 4 rem or above – does not work).

function expand(){
    let dropdown = document.getElementById('dropdown')
    let height = dropdown.offsetHeight
    let maxHeightInput = document.getElementById('maxHeightInput')
    let maxHeight = maxHeightInput?.value ?? 0
    dropdown.style.maxHeight = height > 0 ? 0 : maxHeight
}

#dropdown {
    background: lightgreen;
    max-height: 3rem;
    transition: max-height 0.4s cubic-bezier(.04,1.59,.83,1.18);
    & > ul {
        border: 1px solid black;    
    }
}

<label>Green container expanded max height <input id='maxHeightInput' value='3rem' /></label><br>
<p>List of items is ~3rems tall.</p>
<button onclick={expand()}>Expand / collapse</button>
<div id='dropdown'>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
</div>

The question is how to make this bouncing effect work in my scenario: when I have container with children, and the container is sized dynamically based on its children.