Position Sticky not working (inside Flexbox)

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>