当parent div有一个column-count时，为什么overflow:hidden不能在chrome中工作？

Question

输出应为：

​

​

但在chrome上，我得到了这样的结果：

​

​

从div1中删除column-count属性可以解决这个问题。有趣的是，如果您检查并禁用该属性，然后重新启用它，则一切正常。这是Chrome中的bug吗？

​

#div1 {
  column-count: 1;
}

#div2 {
  overflow: hidden;
  background: red;
}

#div3 {
  transform: translate3d(50px, 50px, 0px);
}

<div id="div1">
  <div id="div2">
    <div id="div3">
      <img src="http://placehold.it/100x100&text=photo"/>
    </div>
  </div>
</div>

​

Answer 1

这不是为什么它不能工作的答案，但是如果你同时需要一个讨厌的解决办法，这对我来说是有效的：

​

#div1 {
  column-count: 1;
  overflow-x: scroll;
}

#div2 {
  overflow: hidden;
  background: red;
}

#div3 {
  transform: translate3d(50px, 50px, 0px);
}

<div id="div1">
  <div id="div2">
    <div id="div3">
      <img src="http://placehold.it/100x100&text=photo"/>
    </div>
  </div>
</div>

​

??

Answer 2

作为你关于这是否是bug的回答:是的，这似乎是Chromium上的一个持久的bug(2011年的原始帖子，正如你现在所发现的，这个问题仍然存在)

https://bugs.chromium.org/p/chromium/issues/detail?id=84030