<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="d-flex flex-column h-100 w-100"> <div class="flex-shrink-1 text-center bg-light border-bottom p-2"> HEADER </div> <div class="flex-grow-1"> <section class="d-flex"> <aside class="h-100" style="flex-basis: 25rem"> <section class="h-100 d-flex flex-column bg-dark"> <aside> <nav class="nav nav-pills flex-column flex-sm-row p-3"> <a class="flex-sm-fill text-sm-center nav-link active" href="#">All Cars</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Packs</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Holding</a> </nav> </aside> <div class="flex-grow-1 p-3 o-xh o-ya"> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> <input /> </div> <aside> <div class="d-flex justify-content-between"> <div class="p-3"> <a href="#"> Refresh <i class="fas fa-sync-alt"/> </a> </div> <div class="p-3"> <a href="#"> Clear Filters <i class="far fa-trash-alt"/> </a> </div> </div> </aside> <aside> <div class="d-flex justify-content-between"> <div class="p-3"> <a href="#"> Saved Searches [ 1 ] </a> </div> <div class="p-3"> <a href="#"> Save <i class="far fa-bookmark"/> </a> </div> </div> </aside> </section> </aside> <div class="container-fluid section-main o-xh o-ya p-3"> <div class="row"> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> <div class="col-4"> <img class="img-fluid" src="https://vignette.wikia.nocookie.net/forzamotorsport/images/3/3a/FH3_Toyota_GT86.jpg/revision/latest?cb=20170328161332" /> </div> </div> </div> </section> </div> </div>

html, body { width: 100%; height: 100%; } .o-a { overflow: auto; } .o-h { overflow: hidden; } .o-ya { overflow-y: auto; } .o-yh { overflow-y: hidden; } .o-xa { overflow-x: auto; } .o-xh { overflow-x: hidden; }