sticky position not working for viewport height less than 500px

I am having a strange problem with the sticky position in CSS. I want an element to stick to the bottom of the page and it is working perfectly if the viewport height is greater than or equal to 500px but if it is reduced any further then the element no longer sticks to the bottom of the page

This is how the sticky element looks like

 .sticky{
    position: sticky;
    bottom: 0;
    top: 90%;
    display: flex;
    height: 50px;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: var(--tl-dark-theme);
}

This is the container of the sticky element

section {
    height: 100%;
}