Currently, I am facing a challenge in making two sidebars sticky so that they will follow as the user scrolls until they reach the bottom of the page.
In my current editing project, this implementation seems to be more complex compared to other programs where it is easily achievable.
Despite trying different solutions and troubleshooting methods, such as changing browsers (Chrome and Firefox), adding flexstart to the sticky component, including top: value, adjusting height: auto, removing flex from parent containers, or trying different display properties like table, block, etc., the problem persists.
Interestingly, using 'position: fixed' works fine, but 'position: sticky' does not. Although I can create a function to detect when the user reaches the component's height and switch to 'fixed', I prefer finding a simpler solution using 'sticky'.
As this is a large scale project with extensive code involved, I cannot share it all here, but I can provide the specific element causing the issue.
div.sticky {
position: sticky;
top: 0;
justify-content: flex-start;
}