flexbox-layout-test

app.scss

html, body, p {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.padding {
  padding: 20px;
}

.Application {
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: white;

  &__header {
    flex: 1 0 60px;
    background: #222;
  }

  &__main {
    background: #e4e4e4;
    display: flex;
    flex: 1 1 auto;
  }

  &__left-panel {
    flex: 0 0 30%;
    background: #444;
  }

  &__center-panel {
    flex: 0 0 70%;
    background: #666;
    display: flex;
    flex-direction: column;
  }
  &__center-panel-header {
    height: 60px;
    background: #999;
  }
  &__center-panel-body {
    background: #bbb;
    flex: 1;
    overflow: scroll;
  }
  &__center-panel-footer {
    height: 60px;
    background: #999;
  }
}

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  data: [...Array(100)].map((el, i) => `Lorem ${i}`)

});

styles.app.css

html, body, p {
  margin: 0;
  padding: 0;
  font-family: sans-serif; }

.padding {
  padding: 20px; }

.Application {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: white; }
  .Application__header {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 60px;
            flex: 1 0 60px;
    background: #222; }
  .Application__main {
    background: #e4e4e4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto; }
  .Application__left-panel {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%;
    background: #444; }
  .Application__center-panel {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 70%;
            flex: 0 0 70%;
    background: #666;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .Application__center-panel-header {
    height: 60px;
    background: #999; }
  .Application__center-panel-body {
    background: #bbb;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow: scroll; }
  .Application__center-panel-footer {
    height: 60px;
    background: #999; }

templates.application.hbs

<div class="Application">
  <header class="Application__header">
    <div class="padding">
      header
    </div>
  </header>

  <div class="Application__main">
    <div class="Application__left-panel">
      <div class="padding">
        left-panel
      </div>
    </div>
    <div class="Application__center-panel">
      <div class="Application__center-panel-header">
        <div class="padding">
          center-panel-header
        </div>
      </div>
      <div class="Application__center-panel-body">
        <div class="padding">
          center-panel-body
          {{#each data as |item|}}
            <li>{{item}}</li>
          {{/each}}
        </div>
      </div>
      <div class="Application__center-panel-footer">
        <div class="padding">
          center-panel-footer
        </div>
      </div>
    </div>

  </div>
</div>

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
  }
}