I want to create a fixed left sidebar using flexbox.
The sidebar should have its own scroll bar if the content is long, and I don't want it to move when I scroll down the main content.
Check out this example for reference: http://codepen.io/tedartus/pen/KmGYNm
However, I encountered an issue where the sidebar also moves when scrolling down.
I came across a thread on fixing the sidebar position with flexbox. I followed the suggestion of making the container as tall as the screen and only adding scrolling to the main content.
.wrapper {
display: flex;
height: 100vh;
}
.content {
flex: 1 1 auto;
overflow: auto;
}
While this solution worked, I noticed that the scrollbar on the right disappeared. Any thoughts on why this might be happening?
=> http://codepen.io/tedartus/pen/Pmygpq
I need to address this before tackling the scrollbar for the sidebar.
Thank you