flex and height layout

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({

});

controllers.flex.js

import Ember from 'ember';

export default Ember.Controller.extend({
  numbers: 
    [
      1, 2, 3, 4, 5, 6, 7, 
      8, 9, 10, 11, 12, 13,
      14, 15, 16, 17, 18, 19
    ]
});

controllers.height.js

import Ember from 'ember';

export default Ember.Controller.extend({
  numbers: 
    [
      1, 2, 3, 4, 5, 6, 7, 
      8, 9, 10, 11, 12, 13,
      14, 15, 16, 17, 18, 19
    ]
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('height')
  this.route('flex', {path: '/'})
});

export default Router;

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt; 
}

.frost-list {
  height: 400px;
  border: 1px black solid;
}

.frost-list .header {
  height: 60px;
  color: white;
  background-color: green;
}

.frost-list .content {
  height: calc(100% - 60px);
}

.frost-list .content .sm-container {
  height: 100%;
  overflow-y: scroll;
}

.item {
  height: 60px;
  color: white;
  background-color: #ff9999
}





.flex-frost-list {
  height: 400px;
  border: 1px black solid;
  display: flex;
  flex-direction: column;
}

.flex-frost-list .header {
  height: 60px;
  color: white;
  background-color: green;
}

.flex-frost-list .content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flex-frost-list .content .sm-container {
  flex: 1;
  overflow-y: scroll;
}

templates.application.hbs

{{outlet}}

templates.flex.hbs

<div class='flex-frost-list'>
  <div class='header'>flex</div>
  <div class='content'>
    <div class='sm-container'>
      <div class='virtical-collection'>
        {{#each numbers as |number|}}
          <div class='item'>{{number}}</div>
        {{/each}}
      </div>
    </div>
  </div>
</div>

<br>

<div class='flex-frost-list'>
  <div class='content'>
    <div class='sm-container'>
      <div class='virtical-collection'>
        {{#each numbers as |number|}}
          <div class='item'>{{number}}</div>
        {{/each}}
      </div>
    </div>
  </div>
</div>

templates.height.hbs

<div class='frost-list'>
  <div class='header'>height</div>
  <div class='content'>
    <div class='sm-container'>
      <div class='virtical-collection'>
        {{#each numbers as |number|}}
          <div class='item'>{{number}}</div>
        {{/each}}
      </div>
    </div>
  </div>
</div>

<br>

<div class='frost-list'>
  <div class='content'>
    <div class='sm-container'>
      <div class='virtical-collection'>
        {{#each numbers as |number|}}
          <div class='item'>{{number}}</div>
        {{/each}}
      </div>
    </div>
  </div>
</div>

twiddle.json

{
  "version": "0.10.4",
  "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.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}