css - 切换溢出属性时，谷歌浏览器不会调整内容大小

Question

我有一个 div#pane 元素，overflow:hidden 处于常规状态，overflow: auto 处于“悬停”状态。在该 div 中有一个 div.content 元素。

当 div#pane 悬停时，div.content 会调整大小以适应垂直滚动条。但是，当鼠标指针离开 div#pane 时，div.content 不会更改其宽度，即使滚动条不再可见。

此行为仅在 Chrome 中表现出来，Firefox 可以处理此问题。

jsFiddle to play with

Answer 1

我已经设法用 Javascript 解决了这个问题，尽管它感觉像是一些黑魔法。如果有 CSS 解决方案，我很乐意接受。

/* force redraw of the node */
$(".content").on("mouseleave", function () {
   var el = $("<div></div>");
   el.appendTo(this);
    setTimeout(function () {
        el.remove();
    },1);
});

jsFiddle with this solution