使用列计数时,溢出的内容在除第一列之外的所有内容中完全消失,为什么？

Question

当column-count在包装器中使用,并且包装器中的容器已经border-radius应用,并且容器中的内容溢出时,除了第一个列之外,内容完全消失在所有列中.

这是我的例子:https://jsfiddle.net/f4nd7tta/
红色半圆只在第一列中可见,为什么？

#main_wrap{
    width:100%;
    border:solid 1px black;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
#main_wrap > div{
    border-radius:5px;
    overflow:hidden;
    position:relative;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    width:70%;
    height:300px;
    border:solid 2px grey;
    margin:2px;
}
#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
}

<div id="main_wrap">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

Answer 1

老实说,我不知道为什么会发生这种情况,我正在寻找文档,如果他们已经指定了这种行为,我想检查它是故意还是错误.现在我正在使用

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);

它的工作原理......所以添加上面的属性#main_wrap > div,我认为如果你排除供应商的前缀,那就transform: translateX(0);足够了.

演示

好吧,我认为这是一个错误:

问题84030:CSS 3列错误(溢出:隐藏的功能,它不应该)

绝对定位的元素被剪裁,好像存在溢出:隐藏应用于框.但是,应用overflow:visible或任何其他规则不能解决问题

我想的更多,因为我建议我随机插入属性的第一个解决方案并且它有效,还有一种方法可以通过使用clip属性合法地做你正在做的事情,你将不再需要overflow: hidden;..

#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
    clip: rect(0px,20px,40px,0px);
}

演示2 (剪辑演示)

Answer 2

我花了很多时间研究这个问题，并发现了将CSS属性添加will-change: transform;到列布局内的项目的建议。例如：

<div class="container">
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
</div>

<style>
  .container {
    columns: auto 5;
    column-gap: 0;
    margin: -16px;
  }

  .items {
    break-inside: avoid;
    padding: 16px;
    page-break-inside: avoid;
    will-change: transform;
  }
</style>