Bootstrap scrollable column with 100% height
<p>I have 2 columns using bootstrap, I am trying to have the right column to have <code>overflow-y: scroll</code> while hiding the scrollbar on <code>html, body</code></p>

<p>The problem is, the scroll bar appears but it is disabled and unscrollable.</p>

<p>This is my HTML</p>

<pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-12 col-md-8 text-center" id="left"&gt;
    &lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;&lt;p&gt;Left contents&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-12 col-sm-12 col-md-4" id="right"&gt;
        &lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;&lt;p&gt;Right contents&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}
#left {
    background-color: #FC6E51;
}

#right {
    background-color: #4FC1E9;
}

#left, #right{
  text-align: center;
  height:100%;
  overflow-y: scroll; 
}
</code></pre>

<p>What am I doing wrong?</p>

<p><strong>JSFiddle</strong> <a href="https://jsfiddle.net/ensc5uy1/9/" rel="nofollow noreferrer">https://jsfiddle.net/ensc5uy1/9/</a></p>

<p><strong>EDIT</strong> what @Chris and @Ben provided works inside JSFiddle but when I apply it in my application it doesn't work. I've created a new JSFiddle with my entire CSS and it works in there but no inside my app. I don't know what's going on</p>

<p><a href="https://jsfiddle.net/5td0acad/" rel="nofollow noreferrer">https://jsfiddle.net/5td0acad/</a></p>