Google Chrome - Flexbox + overflow-x：auto [英] Google Chrome - Flexbox + overflow-x:auto

问题描述

我有一个奇怪的问题，谷歌Chrome，flexbox和溢出。

当一个容器处于flexbox模式，并且孩子开始水平溢出

强制浏览器重绘（例如通过调整大小）将使滚动条再次运行。

以下是一个示例： http：// jsfiddle.net/w8rtk2de/3/

• 在Google Chrome中


• 滚动


• 在切换类别上点击两次即可删除滚动并重新设置。


• 工作）


• 调整窗口大小以强制重绘


• 再次滚动工作

  $（'＃toggle' ，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 =togglehref =＃>切换类< / a>< / p>< div class =row> < div class =col> < div id =targetclass =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>  

解决方案

好的，在这里快速：

我添加了位置：相对和 z-index：1;

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

检查jsFiddle

I have a strange issue with Google Chrome, flexbox and overflow.

When a container is in flexbox mode and a child starts to overflow horizontally (say you change the width of the content via javascript), the scrollbar appears but can't be manipulated.

Forcing the browser to redraw (by resizing for example) will make the scrollbar functional again.

Here's an example of this : http://jsfiddle.net/w8rtk2de/3/

• In Google Chrome
• Try to scroll the paragraph
• Click twice on "Toggle class" to remove the scroll and set it back again
• Try again to scroll (Scroll won't work)
• Resize the window to force a redraw
• Scroll works again
• This seems to happen only when the container is in 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>

If anybody has a quick hack to solve that issue, it would be great.

解决方案

okay, here in quick:

i added position:relative and z-index:1;

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

check on jsFiddle

这篇关于Google Chrome - Flexbox + overflow-x：auto的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！