Chrome 47 bug in flexbox, scrollbar overlap

问题:

I'm using flexbox to display two columns:

• container flex-direction: row
• overflow-y: auto

When content changes in the left column, the right column shifts left to overlap the scrollbar and part of the left column.

http://jsfiddle.net/zshbLsev/

Not seeing this with any other browser, I assume it's a bug, but any ideas on how to fix without throwing out the flexbox-direction: row would be much appreciated.

HTML

<div class="container">
    <div class="left"  onclick="revealtext()">
        click me    
        <div id="display-text" style="display:none">
            left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left 
        </div>
    </div>
    <div class="middle">
        middle
    </div>
</div>

CSS

.container {
    background: blue;
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
    height: 200px;
    width: 600px;
}

.left {
    background: darkgray;
    flex: 0 0 200px;
    -ms-flex: 0 0 200px;
    border-right: 5px solid red;
    overflow-y: auto;
    height: 200px;
    width: 200px;
}

.middle {
    background: gray;
    flex: 0 0 400px;
    -ms-flex: 0 0 400px;
    overflow-y: auto;
    border-left: 5px solid green;
    height: 200px;
    width: 400px;
}

JS

revealtext = function() {
    var el = document.getElementById('display-text');
    if (el.style.display == 'block')
        el.style.display = 'none';
    else 
        el.style.display = 'block';
}