css - inside - scroll responsive div

Error Chrome 47 en flexbox, superposición de barra de desplazamiento

Question

Estoy usando flexbox para mostrar dos columnas:

• dirección flexible del contenedor: fila
• overflow-y: auto

Cuando el contenido cambia en la columna de la izquierda, la columna de la derecha se desplaza hacia la izquierda para solapar la barra de desplazamiento y parte de la columna de la izquierda.

http://jsfiddle.net/zshbLsev/

Al no ver esto con ningún otro navegador, supongo que es un error, pero cualquier idea sobre cómo solucionarla sin descartar la flexbox-direction: row sería muy apreciada.

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'';
}