Skip to content

Instantly share code, notes, and snippets.

@drewlesueur

drewlesueur/flexbox_nested_demo.html

Created December 22, 2015 23:06
Show Gist options
  • Save drewlesueur/6f52275a4c2f1a8bdfd6 to your computer and use it in GitHub Desktop.
Save drewlesueur/6f52275a4c2f1a8bdfd6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flexbox_nested_demo.html
<!doctype html>
<html>
<head>
</head>
<body>
<div style="height: 400px; border: 1px solid green; width: 300px; display: flex; flex-flow: column nowrap; ">
<div style="padding: 20px; background-color: orange; ">I am a header</div>
<div style="flex: 1 1 auto; display: flex; flex-flow: column nowrap; overflow: auto;">
<div style="flex: 1 1 auto; display: flex; flex-flow: column nowrap; overflow: auto;">
<div style="flex: 1 1 auto; overflow: auto;">
<div>
<div style="height: 100px; background-color: olive;">test</div>
<div style="height: 100px; background-color: beige;">test</div>
<div style="height: 100px; background-color: white;">test</div>
<div style="height: 100px; background-color: goldenrod;">test</div>
<div style="height: 100px; background-color: olive;">test</div>
<div style="height: 100px; background-color: beige;">test</div>
<div style="height: 100px; background-color: white;">test</div>
<div style="height: 100px; background-color: goldenrod;">test</div>
</div>
</div>
<div style="background-color: green;">
the bottom
</div>
</div>
</div>
<div style="background-color: navy; color: white; padding: 10px;">
Very bottom
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment