为什么会发生溢出：当父div具有列数时，隐藏在chrome中不起作用

Question

输出应为：

但是在chrome上我得到了：

从div1中删除column-count属性可以对其进行修复。有趣的是，如果您检查并禁用了该属性，然后重新启用它，一切都很好。这是Chrome中的错误吗？

#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

作为对有关此错误是否存在的问题的回答：是的，这似乎是Chromium上的一个持久错误（最初发布于2011年，现在您发现，问题仍然存在）

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