Flexbox layout fun

index.css

html {
  height: 100%;
}

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height: 100%;
  margin: 0;
}

#app {
  height: 100%;
}

.App {
  height: 100%;
}

.Layout {
  display: flex;
  height: 100%;
}

.Layout__sidebar {
  flex: 0 0 100px;
  background-color: wheat;
  padding: 5px 10px;
}

.Layout__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: tan;
}

.TopNav {
  flex: 0;
  background-color: springgreen;
  padding: 5px 10px;
}

.MainContent {
  flex: 1;
  background-color: yellowgreen;
  padding: 5px 10px;
}

.Footer {
  flex: 0;
  background-color: seagreen;
  padding: 5px 10px;
}

index.js

import './index.css'

import {h, Component} from 'preact'

class App extends Component {
  state = {
    embiggened: false
  }
  handleToggleEmbiggen = () => {
    this.setState({embiggened: !this.state.embiggened})
  }
  render() {
    let {embiggened} = this.state
    return <div class="App">
      <div class="Layout">
        <div class="Layout__sidebar">
          Sidebar
        </div>
        <div class="Layout__content">
          <nav class="TopNav">
            Top Nav
          </nav>
          <div class="MainContent" onClick={this.handleToggleEmbiggen}>
            <h2>Flexbox layout fun</h2>
            <h3>Goals:</h3>
            <ol>
              <li>Content area grows to push footer to the bottom when there's little content.</li>
              <li>Sidebar extends full length when content causes the page to scroll.</li>
            </ol>
            <strong>Click anywhere in this section to {embiggened ? 'decrease' : 'increase'} height.</strong>
            {embiggened && <div style={{height: '2000px'}}/>}
          </div>
          <footer class="Footer">
            Footer
          </footer>
        </div>
      </div>
    </div>
  }
}

export default App

package.json

{
  "scripts": {
    "start": "nwb preact run index.js --webpack.autoprefixer=\"last 2 versions\"",
    "build": "nwb preact build index.js --webpack.autoprefixer=\"last 2 versions\""
  },
  "dependencies": {
    "nwb": "0.19.x"
  }
}