There is an answer to this here, but the reason I still need help troubleshooting is because yes - it removes the scrollbar and makes everything good, It still doesnt finish scrolling down right.
It gets near the end and technically scrolls all the way down but its scrolling past the view point resulting in half seeing the end bits.
As you can see, It's scrolled down as far as it can and ended up scrolling more then it should be and this results in not actually scrolling down far enough.
I have no idea what kind of CSS could be kicking off this issue, It even happened when I had two scrollbars.
You can get to the website to test using inspect element here
This is the md-content HTML:
<md-content layout="column" flex ui-view layout-fill style="background-color:#e2e2e2">
<ng-switch on="data.selectedIndex" class="tabpanel-container" style="background-color:#e2e2e2">
It seems to be to do it layout-fill's height=100%. when its set to 100% instead of just choosing whats left of the view it goes 100% of the total amount of view chrome has and then goes outside of chromes view. If I change it to 80% or something I see that it works fine, But for obvious reasons I cant just change it to 80% as it will be different based on different devices
I finally found out why it wasn't scrolling properly, Not sure why but if your md-toolbar and md-content isn't enclosed in
<div layout="column" layout-fill></div> then it wont work properly.
md-content also needs to have layout-fill and flex.