JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script>
<div id="tabs" class="ui-layout-center">
    <ul>
        <li><a href="#tab-1">Tab #1</a></li>
        <li><a href="#tab-2">Tab #2</a></li>
    </ul>
    <div id="tab-1">This content shall:
        <br/>fill up the entire
        <br/>space
        <br/>(left to right)
        <br/>until the bottom of the page. But it shall -NOT-
        <br/>cover the tabs!
        <br/>CONTENT
        <br/>CONTENT
        <br/>CONTENT</div>
    <div id="tab-2">This content shall:
        <br/>fill up the entire
        <br/>space
        <br/>(left to right)
        <br/>until the bottom of the page. But it shall -NOT-
        <br/>cover the tabs!
        <br/>CONTENT
        <br/>CONTENT
        <br/>CONTENT</div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}
#tabs {
    margin: 0;
    padding: 0;
    border: none;
}
#tab-1 {
    background: green;
    overflow: scroll;
}
#tab-2 {
    background: blue;
    overflow: scroll;
}

JavaScript

$(function () {
    var tabs = $("#tabs").tabs({
        heightStyle: "fill"
    });

    $('body').on('resize', function () {
        tabs.tabs('refresh');
    });
});