Position Sticky not working (inside Flexbox) - html

Question

I already tried using align-self: flex-start, but nothing happened. I got the main flex container on the right of my page (flex-direction: column), and now I want one block of my flex columns to be sticky once I scrolled down to them. I wrapped a container around the flex columns I want to be sticky, and I gave that container the position sticky. I will just post a snippet of my HTML and CSS, so it won't become too long of a code. I commented next to the code where my columns are and what each container does:
.rightside_container {
display: flex;
flex-direction: column;
gap: 0px;
margin-top: 60px;
right: 17%;
position: absolute;
z-index: 0;
border-radius: 10px;
background-color: black;
padding-left: 0px;
padding-right: 20px;
padding-top: 8px;
padding-bottom: 8px;
}
.sticky_container {
border: 1px solid white;
position: sticky;
top: 0px;
}
<div class="rightside_container">
<!--big main container-->
<div class="sticky_container">
<!--since I want a few of my columns to be sticky, I wrapped
a little div container around them which I gave the position sticky-->
<div class="follow_flex">
<!--COLUMN 1-->
<div class="follow_pic_container">
<img src="thumbnails/twitterlogo.jpg" class="follow_pic">
</div>
<div class="follow_text_container">
<div class="follow_name">Twitter</div>
<div class="follow_at">#Twitter</div>
</div>
<div class="follow_button_container">
<button class="follow_button">Follow</button>
</div>
</div>
<div class="follow_flex">
<!--COLUMN 2-->
<div class="follow_pic_container">
<img src="thumbnails/youtubelogo.jpg" class="follow_pic">
</div>
<div class="follow_text_container">
<div class="follow_name">YouTube</div>
<div class="follow_at">#YouTube</div>
</div>
<div class="follow_button_container">
<button class="follow_button">Follow</button>
</div>
</div>
</div>
</div>

Answer 1

I think that the code portion that you provide is not enough, but in your snippet if you set a height (for testing purposes) and remove the margin it does the sticky effect. You need to consider that if you got any parent with overflow: hidden sticky position is not going to work.
.rightside_container {
display: flex;
flex-direction: column;
gap: 0px;
right: 17%;
position: absolute;
z-index: 0;
border-radius: 10px;
background-color: black;
padding-left: 0px;
padding-right: 20px;
padding-top: 8px;
padding-bottom: 8px;
height: 600px;
}
.sticky_container {
border: 1px solid white;
position: sticky;
top: 0px;
}
<div class="rightside_container"> <!--big main container-->
<div class="sticky_container"> <!--since I want a few of my columns to be sticky, I wrapped
a little div container around them which I gave the position sticky-->
<div class="follow_flex"> <!--COLUMN 1-->
<div class="follow_pic_container">
<img src="thumbnails/twitterlogo.jpg" class="follow_pic">
</div>
<div class="follow_text_container">
<div class="follow_name">Twitter</div>
<div class="follow_at">#Twitter</div>
</div>
<div class="follow_button_container">
<button class="follow_button">Follow</button>
</div>
</div>
<div class="follow_flex"> <!--COLUMN 2-->
<div class="follow_pic_container">
<img src="thumbnails/youtubelogo.jpg" class="follow_pic">
</div>
<div class="follow_text_container">
<div class="follow_name">YouTube</div>
<div class="follow_at">#YouTube</div>
</div>
<div class="follow_button_container">
<button class="follow_button">Follow</button>
</div>
</div>
</div>
</div>