谷歌浏览器 - Flexbox + overflow-x:auto

时间:2015-04-08 08:36:18

标签: css google-chrome flexbox

我对Google Chrome,flexbox和溢出有一个奇怪的问题。

当容器处于弹箱模式且子级开始水平溢出时(例如,您通过javascript更改内容的宽度),滚动条会出现,但无法操作。

强制浏览器重绘(例如通过调整大小)将使滚动条再次起作用。

以下是一个例子:http://jsfiddle.net/w8rtk2de/3/

  • 在谷歌浏览器中
  • 尝试滚动段落
  • 点击两次"切换课程"删除滚动并再次将其设置回来
  • 再次尝试滚动(滚动赢了工作)
  • 调整窗口大小以强制重绘
  • 滚动再次工作
  • 这似乎只在容器处于展示flex状态时才会发生。



$('#toggle').on('click', function(e) {
    $('#target').toggleClass('overflowing');
});

.overflowing {
    overflow-x: auto;
    white-space:nowrap;
}

.row {
    display: flex;
}

.col {
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><a id="toggle" href="#">Toggle class</a></p>

<div class="row">
    <div class="col">
        <div id="target" class="overflowing">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aspernatur reiciendis amet libero quasi laborum unde sint eum dolores vitae dolorum autem nihil quae voluptatum illo a atque velit placeat.</p>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

如果有人快速解决这个问题,那就太好了。

1 个答案:

答案 0 :(得分:4)

好的,快点:

我添加位置:相对 z-index:1;

.overflowing {
  overflow-x: auto;
  white-space:nowrap;
  position: relative;
  z-index: 1;
}

check on jsFiddle