Skip to content

Instantly share code, notes, and snippets.

@benkeen

benkeen/flex.html

Created September 8, 2015 15:10
Show Gist options
  • Save benkeen/1d98561b777de26dbf2e to your computer and use it in GitHub Desktop.
Save benkeen/1d98561b777de26dbf2e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flex.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
/* NEEDED */
height: 100%;
}
body {
/* ignore */
color: white;
margin: 0;
/* NEEDED */
height: 100%;
}
#main {
/* ignore */
background-color: blue;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* NEEDED */
height: 100%;
}
#main > div {
/* ignore */
padding: 20px;
}
#monitoring-header2 {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.date-ranges {
background-color: green;
-webkit-flex: 0 0;
-ms-flex: 0 0;
flex: 0 0;
}
#content {
background-color: gray;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: auto;
}
</style>
</head>
<body>
<div id="main">
<div id="monitoring-header2">headsljfh skfjs dfsdjk fsdjhf jksdhfkjhds kjfhkj sdhfkjs kjfhjks dhkfjshdk jfhskjdf kjsdhfkj dskjfhksj dfkjshd kjfhskdj fkjsdhfkj dhskjfs kjdhfk jsdhfkjdhskjfhds kjfskdjhfk jsdhfk sdhfk jdhsfkjshfk jsdhder</div>
<div class="date-ranges">sdkfjhsdkfjhsdfkjhsd kfjhsd </div>
<div id="content">
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
<p>main content </p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment