Boostrap JqueryDataTables Flexbox example

Demo of problem

by BananaBread2

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/features/scrollResize/dataTables.scrollResize.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid m-0 h-100 w-100">
        <div class="row h-100">
            <div class="h-100 col-2 m-0 p-0">
                <div class="bootstrap-vertical-nav bg-blue text-center h-100">
                    <h2 class="text-light">App</h2>
                    <div class="dropdown mb-2">
                        <a class="dropdown-toggle mt-1 text-white" href="#" role="button" id="UserMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-user mr-1"></i><span class="collapse hidden-sm-down d-inline font-weight-bold">Username</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right justify-content-center" aria-labelledby="UserMenuButton">
                            <a href="#" class="dropdown-item" data-dismiss="modal" onclick="LogOff.submit();" id="logOff">Log Out</a>
                        </div>
                    </div>
                </div>
            </div>
			<div class="d-flex flex-column w-100 col-10 px-0 bg-light"> <!-- d-flex flex-column -->
<div id="resultsDiv" class="card m-2 flex-fill">
	<div class="card-header">
		<ul class="nav nav-tabs card-header-tabs tabs small">
			<li class="nav-item">
				<a class="nav-link active sm" id="loanGrid-tab" data-toggle="tab" href="#loanGrid" role="tab" aria-controls="loanGrid"...

CSS

body,html {
  height: 100%;
  overflow: scroll;
}
.wrapper {
    align-items: stretch;
}

/* Creates a vertical nav starting at 768px (sm) */
@media (min-width: 768px) {
    .bootstrap-vertical-nav {
        display: block;
    }
}

.bootstrap-vertical-nav {
    /*width: 190px;*/
    min-width: 100px;
}

.bg-blue {
    background-color: #1D507D
}

#loginLogo {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: -35px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#login, #changePassword {
    position: relative;
    max-width: 250px;
}

#forgotPassword{
    position: relative;
    width: 400px;
}

.word-wrap {
    word-wrap: break-word;
    overflow: hidden;
    max-width: 100%;
}

.alert {
    position: absolute;
    z-index: 1;
}

.vl {
	border-left: 2px solid white;
	height: 30px;
}

#searchDateDiv, #searchMoneyDiv {
	min-width: 350px;
}

JavaScript

$('#example').DataTable( {
    scrollResize: true,
    scrollY: 25,
    scrollCollapse: true,
    paging: false
} );