100% height and overflow with bootstrap
<p>This is more of a design practice question than an actual problem but i'm trying to get 100% height on my main content div with the following layout.</p>

<p><a href="https://i.stack.imgur.com/rhKj4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rhKj4.png" alt="enter image description here"></a></p>

<pre><code>&lt;section class="content"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-sm-12"&gt;
                &lt;!-- Content --&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-xs-8"&gt;
                        &lt;div class="main-container-wrapper"&gt;
                            &lt;h1&gt;Content&lt;/h1&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-4"&gt;
                        &lt;div class="right-container-wrapper"&gt;
                            &lt;h3&gt;Chat&lt;/h3&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>This code as it stands, the main-container-wrapper only has the height of the content in it (the h1 with content text). I would like the main-container-wrapper to always be 100% of the viewport and scrollable when the content overflows. I find achieving this setting 100vh on the main content wrapper class a little hacky. As it also causes the boxy to be scrollable for some reason.</p>

<p>When using boostrap, how do you go about setting height on divs to 100% when you have all these parent divs with classes like row and columns.</p>

<p>Some guidance would be appreciated.</p>