Google Chrome-Flexbox overflow-x:自动

Question

我对Google Chrome、flexbox和overflow有一个奇怪的问题。

当容器处于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>

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

Answer 1

好吧，在这里快速：

我增加了位置：相对和z指数：1；

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

检查JSFIDLE