flexbox中的Chrome 47错误,滚动条重叠

时间:2015-12-11 01:22:04

标签: css google-chrome scrollbar flexbox

我正在使用flexbox显示两列:

  • 容器flex-direction:行
  • overflow-y:auto

当左栏中的内容发生变化时,右栏会向左移动以重叠滚动条和左栏的一部分。

http://jsfiddle.net/zshbLsev/

没有看到任何其他浏览器,我认为这是一个错误,但任何关于如何修复而不抛弃flexbox-direction:行的想法将非常感激。

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

0 个答案:

没有答案