A while back I ran into this problem – I needed to have multiple columns, each independently scrollable. So I did what everyone does – I searched Google. Finally I solved the problem with Flebox , everyone’s favorite CSS tool. But I needed the solution in Bootstrap, as that was a required responsive dependency in my project. So I formulate how to copy most of the method I used with flexbox into bootstrap. I was surprisingly successful. Seeing that none of the answers I found online were satisfactory, I decided to share this.
When the webpage is divided into two equal columns, and the content inside the columns starts to overflow, the columns become scrollable. However, by doing some small modifications, the columns can be fixed. This article will demonstrate how to keep one column fixed, and the other column scrollable. Here’s how I did it:
Multi-Column Vertical Scrolling in CSS
See the Pen Columnar Independence by Aneesh Kulkarni (@aneekul) on CodePen.
make a container scrollable bootstrap
.anyClass {
height:80vh;
overflow-y: scroll;
}
All you have to do is force the height of the containing div (here a row) to the height of the viewport. Then you make all the columns 100% height and set the overflow-y to scroll. That way any overflow on the column will be scrollable, but they will still take up the whole page.
