html - 为什么会溢出:hidden not working in chrome when parent div has a column-count

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>

🤢🤮