Horizontal Scrollbar for fixed right side bar layout in Chrome 45

Question

I have this fixed right side bar layout working perfectly for me for a long time, it works in most of the browsers and devices too.

But the recent chrome update to 45 which happened few days ago, broke the layout by adding a horizontal scrollbar.

There are different ways to achieve the fixed right side bar layout, but this layout needs to extend the background color of main and side columns to the browser width extent with fixed max-width container(marked in red) and with shadow between columns.

And this below code was the best way I could achieve it.

Now all I need is no scrollbar in Chrome 45, I tried different ways to avoid it but none works. I know this wont be a easy fix, but any help on this would be appreciated.

http://jsfiddle.net/chetanjk/ptuxn2dq/

HTML

<div class="container" style="background:#000; color:#fff; text-align:center">
        ------page content max width for reference ----
    </div>
    <div class="page-cols">
        <div class="container ">
            <div class="cols-wrap">
                <section class="main-col">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ipsum sapien, tincidunt ac augue sodales, consequat sodales elit. Nunc pharetra eget velit sed pharetra.
                </section>
                <aside class="aside-col">
                    <div class="pack">
                        Sed luctus nisl ut ipsum scelerisque semper. Nullam euismod eros vitae odio viverra tristique. Nam pulvinar massa at diam congue, vitae fringilla neque varius. In molestie quis neque luctus facilisis.

                        Vestibulum sit amet mi ut odio condimentum dictum vel a metus. Morbi ultrices enim ut accumsan lacinia. Praesent augue purus, bibendum in odio in, pharetra consectetur mi. Vivamus ac arcu dignissim, placerat ipsum eu, tempor magna. Integer nec ipsum dui. Quisque at diam est. Aliquam ut placerat ligula, eu venenatis turpis. Sed nec eros vel ante ornare eleifend. Suspendisse aliquam nulla consectetur tellus molestie efficitur.
                    </div>
                </aside>
            </div>
        </div>
    </div>

CSS

body{
    font-family: arial;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    overflow-y: scroll;
    margin:0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
.container:after,
.cols-wrap:after,
.page-cols:after{ 
    clear: both; 
    content: ""; 
    display:table; 
}

.container{
    margin: 0 auto;
    max-width: 1200px;
    min-width: 300px;
    padding:0 10px;
    position: relative;
}

.page-cols{
    background-color: #999;
}
.cols-wrap{
    width: 100%;
    position: relative;
    background-color: #ccc; /*this can be #fff too to match body bg*/
    box-shadow: 10px 10px 10px -10px #000;
    right: 320px;
}
.cols-wrap .main-col{
    float: left;
    left: 320px;
    position: relative;
    width: 100%;
    padding-right: 340px;
}
.cols-wrap .aside-col{
    float: right;
    position: relative;
    width: 320px;
    margin-right: -320px;
    padding-left: 20px
}