Flexbox Layout Test

by medmunds

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.2/normalize.css">
<div class="app">
    <header class="site-header">
        <div class="logo"><span class="icon"></span><span class="text">Logo</span></div>
        <div class="site-nav">
            <span class="hamburger" title="show trip-nav menu in left drawer">&#8801;</span>
            Trip Title / destination / dates
        </div>
        <div class="user-menu"><span class="icon"></span><span class="text">User Menu</span></div>
    </header>

    <section class="main">
        <nav class="menu">
            <ul class="side-nav">
                <li><a href="#"><span class="icon"></span><span class="text">Trip Home</span></a></li>
                <li><a href="#"><span class="icon"></span><span class="text">Idea Finder</span></a></li>
                <li><a href="#"><span class="icon"></span><span class="text">Notebook</span></a></li>
                <li><a href="#"><span class="icon"></span><span class="text">Itinerary</span></a></li>
                <li><a href="#"><span class="icon"></span><span class="text">Discussion</span></a></li>
                <li><a href="#"><span class="icon"></span><span class="text">Etc.</span></a></li>
                <li class="spacer">&nbsp;</li>
                <li><a href="#"><span class="icon">&#9665;</span><span class="text">My Other Trips</span></a></li>
            </ul>
        </nav>

        <div class="entry-list">
            Entry List

            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div class="entry">Entry</div>
            <div...

SCSS

html, body {
            height: 100%;
        }
        .app {
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }
        .app > * {
            flex: 1 0 auto;
        }
        .app .site-header {
            flex: 0 0 auto;
        }

        .site-header {
            display: flex;
            flex-direction: row;
            align-items: baseline;
        }
        .site-header > * {
            flex: 0 0 auto;
        }
        .site-header .site-nav {
            flex: 1 0 auto;
        }


        .main {
            display: flex;
            flex-direction: row;
            max-height: 100vh;
        }
        .main > * {
            flex: 1 0 auto;
            max-height: 100vh;
            overflow: auto;
        }
        .main .menu {
            flex-grow: 0;
        }
        .main .entry-list {
            flex-grow: 2;
        }

        .menu {

        }
        .entry-list {
        }
        .entry {
            height: 4rem;
            margin: 1rem 0;
            padding: 0.5rem;
        }


        .widgets {
            display: flex;
            flex-direction: column;
        }
        .widgets > * {
            flex: 1 1 auto;
        }

        /* Mockup */

        .widget {
            box-sizing: border-box;
        }

        .site-header, .menu, .entry-list, .widget {
            padding: 1rem;
        }

        /*  */
        .logo {
            font-size: 1.6rem;
            margin-right: 1em;
        }

        .icon {
            display: inline-block;
            vertical-align: text-top;
            width: 1em;
            height: 1em;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 100%;
        }
        .text {
            margin-left: 0.5em;
        }

        .side-nav {
            display: block;
            list-style-type: none;
            padding: 0;
            margin: 0 -0.5em;
        }
        .side-nav li {
        }
       ...