JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="content-container">
        <div id="page-specific-container">
            <!-- Main body container -->
            <div class="content-middle">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis facilisis rhoncus. Morbi sed justo enim. Phasellus dolor orci, iaculis at turpis eget, consectetur gravida neque. Nullam vel massa quis lectus maximus feugiat at at est. Quisque pellentesque condimentum auctor. Proin vel risus sapien. Duis vel ante augue. Nunc sit amet euismod ligula. Mauris a massa vel dui molestie egestas at et augue. Nullam ipsum arcu, euismod at turpis at, varius accumsan eros. Sed accumsan egestas odio a sagittis. Nunc sapien eros, tincidunt id imperdiet vel, viverra et felis. Cras eu magna aliquam, accumsan lacus vitae, aliquam lorem. Duis vitae euismod tellus. In consequat gravida sem, ut aliquet orci finibus ac. In feugiat augue a ante fermentum, in porta risus semper.

                Sed hendrerit leo lorem, id laoreet velit vulputate a. Phasellus iaculis libero sit amet massa hendrerit, quis congue tellus malesuada. Etiam nec semper odio. In at massa pretium, lobortis ligula at, vulputate magna. Sed porttitor neque augue, nec placerat orci volutpat non. Mauris malesuada dolor et arcu semper, eu maximus orci condimentum. Etiam feugiat libero tortor, sed malesuada sapien scelerisque ut. Phasellus quis sapien nec diam tempor maximus id id dolor. Vivamus faucibus ante quam, eget maximus ante pharetra tristique. Praesent ullamcorper, velit sit amet pellentesque ultricies, massa nunc sollicitudin erat, at feugiat eros lorem a massa. Fusce mattis, ex scelerisque laoreet consequat, orci sapien ornare elit, id blandit nisi augue nec ligula. Nullam a venenatis risus, a aliquam nunc.

                Praesent vehicula nibh vitae tempor porttitor. Mauris sit amet imperdiet ligula. Vivamus neque justo, tincidunt eu venenatis ac, euismod vel augue. Nunc eu tristique quam. Lorem ipsum dolor sit amet,...

CSS

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body, html{
	margin: 0;
	padding: 0;
	font-size: 16pt;    
	width: 100%;
    height: 100%;
	background: blue;
}

#content-container{
    padding-top: 45px; /* This is for navigation */
	height: 100%;
	background: red;
}

#page-specific-container{
	/* At this point the "height" property alone no longer works with scrolling */
	/* Firefox requires that "height: 100%" also be present or else the .content-middle tag doesn't work */
	min-height: 100%;
	background: yellow;
}

.content-middle{
	min-height: 100%;
    background:purple;
}