Holly Grail

by D7460N

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<body class="container-fluid d-flex flex-column px-0">
	<nav class="page-header navbar navbar-expand-md navbar-dark bg-dark">HEADER</nav>
	<main class="row flex-fill no-gutters flex-nowrap overflow-hidden">
		<div class="col d-flex flex-column filter">FILTER</div>
		<div class="col d-flex flex-row no-gutters overflow-hidden horizontal">
			<div class="col d-flex flex-column results">RESULTS</div>
			<div class="col d-flex flex-column splitter"></div>
			<div class="col d-flex flex-column profile">PROFILE</div>
		</div>
		<div class="col d-flex flex-column details">DETAILS</div>
	</main>
	<div class="page-footer bg-dark p-2">FOOTER</div>
</body>

CSS

/********************
    LAYOUT
*********************/

html, body {
min-height: 100vh; /* force footer to bottom of browser */
height: 100%;  /*for IE11*/
}
.filter {
  flex: 0 0 200px;
}
.horizontal {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.results {
  flex: 0 0 auto;
  width: 200px;
  min-height: 200px;
  min-width: 100px;
  max-width: 80%;
  white-space: nowrap;
  background: #838383;
  color: white;
}
.splitter {
  flex: 0 0 10px;
  background: #535353;
  min-height: 200px;
  cursor: col-resize;
}
.profile {
  flex: 1 1 auto;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
}
.details {
  flex: 0 0 300px;
}




/********************
    CUSTOM BOOTSTRAP OVERRIDES
*********************/

JavaScript

$(".results").resizable({
  handleSelector: ".splitter",
  resizeHeight: false
});