我对Google Chrome,flexbox和溢出有一个奇怪的问题。
当容器处于弹箱模式且子级开始水平溢出时(例如,您通过javascript更改内容的宽度),滚动条会出现,但无法操作。
强制浏览器重绘(例如通过调整大小)将使滚动条再次起作用。
以下是一个例子:http://jsfiddle.net/w8rtk2de/3/
$('#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;
如果有人快速解决这个问题,那就太好了。
答案 0 :(得分:4)
好的,快点:
我添加位置:相对和 z-index:1;
.overflowing {
overflow-x: auto;
white-space:nowrap;
position: relative;
z-index: 1;
}