Footer label going outside the horizontal scroll bar in primeng datatable

[viswa-optimusprime]

Current behavior
Note: Copy and paste below url in your browser if it not open on a click.
https://stackoverflow.com/questions/46764261/footer-label-going-outside-the-horizontal-scroll-bar-in-primeng-datatable
<p-dataTable [value]="cars" scrollable="true" scrollHeight="200px" scrollWidth="600px" [style]="{'margin-top':'30px'}"> Vertical and Horizontal <p-column field="vin" header="Vin" footer="Vin" [style]="{'width':'250px'}"> <p-column field="year" header="Year" footer="Year" [style]="{'width':'250px'}"> <p-column field="brand" header="Brand" footer="Brand" [style]="{'width':'250px'}"> <p-column field="color" header="Color" footer="Color" [style]="{'width':'250px'}">
Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

**Angular version:**4.2.0
PrimeNG version: 4.1.0
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Language: [all | TypeScript 2.3.3. | ES6/7 | ES5]

Footer label going outside the horizontal scroll bar in primeng datatable

http://plnkr.co/edit/3zrfL9BYsiioL8dOAbQA?p=preview

[viswa-optimusprime]

@cagataycivici Can you please fix the issue ?

[viswa-optimusprime]

Footer should be inside scroll bar