Skip to content

Instantly share code, notes, and snippets.

@benkeen

benkeen/flexbox-horrors.html

Created August 26, 2015 18:29
Show Gist options
  • Save benkeen/16a271baa5f28f260e24 to your computer and use it in GitHub Desktop.
Save benkeen/16a271baa5f28f260e24 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flexbox-horrors.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;
/* for IE 10 */
display: -ms-flexbox;
-ms-flex-direction: column;
/* for all other browsers */
display: flex;
flex-direction: column;
/* NEEDED */
height: 100%;
}
#main > div {
/* ignore */
padding: 20px;
}
#monitoring-header2 {
/* IE 10 */
-ms-flex: 0 0;
/* other browsers */
flex-grow: 0;
flex-shrink: 0;
}
.date-ranges {
background-color: green;
-ms-flex: 0 0;
flex-grow: 0;
flex-shrink: 0;
}
#content {
background-color: gray;
-ms-flex: 1;
flex: 1;
overflow: auto;
}
</style>
</head>
<body>
<div id="main">
<div id="monitoring-header2">header</div>
<div class="date-ranges">date-ranges</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