Ember component ignoring height / overflow

I'm trying to make an ember component that will scroll to the bottom of its self when it's loaded (it's the view for a chat window)

I got the component:

import Ember from 'ember';

export default Ember.Component.extend({
  didRender() {
    const el = this.$('.chat-window');
    el.scrollTop(el[0].scrollHeight);
  }
});

and then the component hbs file

<div class="chat-window">
    
</div>

and then the template view

if I replace

with

<div class="chat-window"></div>

it works fine

But if I try to use the component, the overflow is ignored and the chat messages go way off the screen with no scrolling. Any information would be great thanks.

CSS for chat-window

.chat-window {
  height: 75%;
  width: 100%;
  overflow: scroll;
  word-wrap: break-word;
}