I have a div that shows notifications, and when showing them, it starts to grow equally up and down, but I need it to do it only down, and respect the maximum height.

I have tried changing the position, modifying the top, and I succeed, but as soon as more notifications are shown, everything gets messed up again.

This is what it looks like:
enter image description here

This is how I want it to look:
enter image description here

My css code is this:

.tooltip-noti {
    position: relative;
    z-index: 1;
    top: 50%; 
    transform: translateY(-50%); 
}