Issue with Ember.js and flexbox for layouts: "flex: 1" is being ignored

I'm in the process of converting a CSS/HTML/JS design from a static HTML design into an Ember application. The design uses flexbox for all layouts.

For the sake of this post, lets say my design has 3 columns inside a flexbox wrapper. The left and right are 250px wide and the middle is set to "flex: 1" so that it uses up all the unused space. The left column is also a flexbox wrapper, which has four rows. Three of the rows have fixed heights and the 4th is set to "flex: 1" to use up the unused space.

In Ember, I have generated 2 components for each of the 250px columns. The middle is my outlet, which renders my routes. I have taken the columns and placed them in their respective .hbs files and placed the helpers in application.hbs. They are rendered but "flex: 1" seems to be ignored when the components are rendered. This results in any that are supposed to take up all unused space, not doing so.

Just as a note, if I place all code from my HTML file into my application.hbs file, it renders fine.

Any help would be much appreciated.

Thanks!