How can I create scrollable columns in Bootstrap?

Question

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

In there I have a row with 3 columns, I would like to make each of these columns scrollable instead of the entire page. How can I achieve that?

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

<section class="<?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "w-f-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 class “scrollable” from the main section and include it in the column div, the column disappears and the other 2 columns overflow on the elements below.

This is the relevant 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 "w-f-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 will first need to give each column a class. Then you need to give them the following properties:

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

You may also want to give your body the property overflow: hidden;

Please tell me if this works and if not I'll help further!

Edit: Created a JSFiddle

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