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
Leave feedback about this