我在使用 Google Chrome、flexbox 和 overflow 时遇到了一个奇怪的问题。
当容器处于 flexbox 模式并且子级开始水平溢出时(假设您通过 javascript 更改内容的宽度),滚动条出现但无法操作。
强制浏览器重绘(例如通过调整大小)将使滚动条再次发挥作用。
这是一个例子:http://jsfiddle.net/w8rtk2de/3/
- 在谷歌浏览器中
- 尝试滚动段落
- 在“切换类”上单击两次以移除滚动条并再次将其设置回去
- 再次尝试滚动(滚动不起作用)
- 调整窗口大小以强制重绘
- 滚动再次起作用
- 这似乎只发生在容器处于 display 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>
如果有人能快速解决这个问题,那就太好了。
最佳答案
好的,这里很快:
我添加了position:relative 和z-index:1;
.overflowing {
overflow-x: auto;
white-space:nowrap;
position: relative;
z-index: 1;
}
关于css - 谷歌浏览器 - Flexbox + overflow-x :auto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29509752/