I've attempted to use align-self: flex-start, but it had no effect. The main flex container is on the right side of my page (flex-direction: column) and I want one block of flex columns to stick once I scroll down to them. I enclosed a container around the specific flex columns I want to be sticky, giving that container a position sticky. Below is a snippet of my HTML and CSS for reference:
.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>