How to create scrollable columns in bootstrap?

Question

I created a new template-home2.php in Wordpress Theme.

In it I have a row with three columns, I would like to make each of these columns scrollable, and not the whole page. How can i achieve this?

I have a scrollable class that I apply to the outer section of a page to make it scrollable.

 <section class="<?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "wf-md";} ?>" id="ajax-container"> <section class="hbox stretch bg-black dker"> <section> <section class="vbox"> <section class="scrollable"> <div class="row"> <div class="col-md-5 no-padder no-gutter"> some data </div> <div class="col-md-4 no-padder no-gutter"> some data </div> <div class="col-md-3 no-padder no-gutter"> some data </div> </div> </section> </section> </section> </section> </section> 

When I remove the scrollable class from the main section and include it in the div column, the column disappears and the remaining 2 columns overflow with the elements below.

This is the appropriate CSS.

 .scrollable { overflow-x: hidden; overflow-y: auto; } .no-touch .scrollable.hover { overflow-y: hidden; } .no-touch .scrollable.hover:hover { overflow: visible; overflow-y: auto; } .slimScrollBar { border-radius: 5px; border: 2px solid transparent; border-radius: 10px; background-clip: padding-box !important; } 

Thank you for your help.

UPDATED CODE

 .homecol1, .homecol2, .homecol3 { position: absolute; overflow-y: scroll; } <section class="<?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "wf-md";} ?>" id="ajax-container"> <section class="hbox stretch bg-black dker"> <section> <section class="vbox"> <section class="scrollable"> <div class="row"> <div class="col-md-5 no-padder no-gutter homecol1"> some data </div> <div class="col-md-4 no-padder no-gutter homecol2"> some data </div> <div class="col-md-3 no-padder no-gutter homecol3"> some data </div> </div> </section> </section> </section> </section> </section> 

Answer 1

To achieve this, you first need to specify each class column. Then you need to provide them with the following properties:

 .your-class { position: absolute; overflow-y: scroll; } 

You can also specify your body property overflow: hidden;

Please tell me if this works, and if not, I will help further!

Edit: Created JSFiddle

https://jsfiddle.net/mjmwaqfp/2/