how to make bootstrap column sticky while scrolling

Question

I want to create a faq page like Twitter's FAQ . The left column stays on that position even though the user keep scrolling.

So far here's what I made but it doesn't work.

    <template>
      <div>header here</div>
      <div class="container">
        <div class="row">
          <div class="col-lg-4">
            <div style="position: sticky;">
              1 of 2
            </div>
          </div>
          <div class="col-lg-8">
            2 of 2
          </div>
        </div>
      </div>
    </template>

According to this , we should add sticky property, but it doesn't work.

edit: I think it's because the two columns have the same height, so adding sticky property does not work. Any solutions on how to make the column height fit to the content only?

Any solution? Thank you!!

Answer 1

Position Sticky is not working on col-sm-4 because its parent class row has display:flex property. if you change

display:flex

to

display:block

then position Sticky property will work but it will change your design