Having problem position:sticky in html css

So i am new to html and css and i was doing a project and i am stuck in this type of scenario where sticky element is not sticking at first i thought it’s because i am creating it inside a flexbox which does not have scrollbar but when i looked it up on mdn docs it says it needs nearest scrolling ancestor
now i think of that i have my body element or a big container which is having scroll then i wrote this :

.outer-container{
    display: flex;
    flex-direction: row;       
    height: 2000px;
    overflow: auto;
    border: 5px solid red;
}
.container{
    flex: 1;
    max-width: 600px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: start;
    border: 5px solid blue;
}
.sticky-container{
    flex: 1;
    max-width: 300px;
    height: 100px;
    position: sticky;
    top: 0;
    border: 5px solid green;
}

<div class="outer-container">
    <div class="container">
        <div class="sticky-container">
            this should be sticky
        </div>
    </div>
</div>

why doesn’t it stick now ?? I am confused please help also when i change flex-direction to column and apply some other properties it seams to work
Please Help

You need to sign in to view this answers

Related Post