Holy Grail Scalable Container

components.holy-grail.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.scalable-container.js

import Ember from 'ember';
import { requestAnimationFrame } from '../util/raf'

export default Ember.Component.extend({
  _scale: 1,
  classNames: ['scalable-container'],
  didInsertElement() {
    requestAnimationFrame(() => this.updateScale());
  },
  updateScale() {
    if (this.isDestroyed) { return; }
    let grandParentWidth = this.$().parent().parent().parent().width();
    let scale = this.$().parent().width() / grandParentWidth;
    console.log(grandParentWidth, scale);
    // If the scale has significantly changed
    if (Math.abs(this._scale - scale) > 0.0001) {
      this.$().css({
        transform: `scale(${scale})`,
        width: `${grandParentWidth}px`,
      });
      this._scale = scale;
    }
    //requestAnimationFrame(() => this.updateScale());
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  margin: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.holy-grail {
  display: flex;
  flex: 1;
}

header {
  background: #AAA;
}

nav {
  background: #DDD;
  flex: 0 0 120px;
  order: -1;
}

main {
  flex: 1;
  border: 1px solid red;
  overflow: scroll;
}

aside {
  background: #DDD;
  flex: 0 0 120px;
}

footer {
  background: #AAA;
}

.scalable-container {
  transform-origin: 0 0;
  will-change: transform;
}

main p {
  margin-bottom: 1rem;
}

templates.application.hbs

{{#holy-grail}}
  {{#scalable-container}}
    {{outlet}}
  {{/scalable-container}}
{{/holy-grail}}

templates.components.holy-grail.hbs

<header>header</header>
<div class="holy-grail">
  <main>
    <div class="scalable">
      {{yield}}
    </div>
  </main>
  <nav>navigation</nav>
  <aside>side column</aside>
</div>
<footer>footer</footer>

templates.components.my-component.hbs

{{yield}}
Bar
{{yield}}

templates.components.scalable-container.hbs

{{yield}}

templates.index.hbs

<p>
Skiing has a history of almost five millennia.[1] Although modern skiing has evolved from beginnings in Scandinavia, it may have been practiced more than 100 centuries ago in what is now China, according to an interpretation of ancient paintings.[2][3]
</p>

<p>
The word "ski" is one of a handful of words Norway has exported to the international community. It comes from the Old Norse word "skíð" which means "split piece of wood or firewood".[4][5]
</p>

<p>
Asymmetrical skis were used at least in northern Finland and Sweden until the late 19th century. On one leg the skier wore a long straight non-arching ski for sliding, and on the other a shorter ski for kicking. The bottom of the short ski was either plain or covered with animal skin to aid this use, while the long ski supporting the weight of the skier was treated with animal fat in similar manner to modern ski waxing.
</p>

<p>
Early skiers used one long pole or spear. The first depiction of a skier with two ski poles dates to 1741.[6]
</p>

<p>
Until the mid-19th century skiing was primarily used for transport, and since then has become a recreation and sport.[7] Military ski races were held in Norway during the 18th century,[8] and ski warfare was studied in the late 18th century.[9] As equipment evolved and ski lifts were developed skiing evolved into two main genres during the late 19th and early 20th century, Alpine and Nordic.
</p>

twiddle.json

{
  "version": "0.13.0",
  "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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}

util.raf.js

export function requestAnimationFrame(callback) {
  if (window.requestAnimationFrame) {
    return window.requestAnimationFrame(callback);
  }
  return setTimeout(callback, 2000);
}