Fixed when js set div height lower than scroll height

When I looked at csdn on the computer today, I found that the article interface is generally divided into three parts: the left sidebar displays basic user information and advertisements, the middle article part, and the user's article column on the right. The whole is float. The article position on the right is set to fixed. The sidebar on the left is set to fixed when the scroll height exceeds the height of the sidebar, that is, the sidebar remains unchanged at this time, bottom=0

    let aside = document.getElementsByClassName('aside')[0]
    let asideTop = aside.offsetTop
    let asidescroll = document.body.scrollTop
    let asideBottom = aside.offsetTop + aside.clientHeight
    window.addEventListener('scroll', function() {
    
    
      let screenBottom =
        document.documentElement.scrollTop +
        document.documentElement.clientHeight //获取当前界面距离顶部的高度
      if (asideBottom < screenBottom) {
    
    
        aside.classList.add('fixed')
      } else {
    
    
        aside.classList.remove('fixed')
      }
    })

There was a problem when writing position: fixed in the right column
. Follow CSDN to imitate the writing.
When setting the right recommendation, when the height is set to height:100%, an error will occur.
This is because of the flex layout. Even if the shape is stretched by the child elements in the flex layout, it is actually not stretched.

Because the entire page is flex,
justify-content:center
align-item:center is used