在包装器中使用列计数时，并且包装器中的容器应用了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>
解决方法
老实说，我不知道为什么会发生这种情况，我正在寻找文档，如果他们已经指定了这种行为，我想检查它是故意还是错误。现在我正在使用
-webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0);
它有效…所以在#main_wrap>中添加上述属性div和我认为如果排除供应商前缀而不是转换：translateX(0);足够了。
好吧，我认为这是一个错误：
Issue 84030 : CSS 3 Column bug (overflow: hidden like functionality where it shouldn’t)
The absolute positioned elements are clipped as if there is an
overflow: hidden applied to the Box. However,applying overflow:
visible or any other rule does not fix the problem
我想的更多，因为我建议我随机插入属性的第一个解决方案并且它有效，还有一种方法可以通过使用clip属性合法地执行您正在做的事情，并且您不需要溢出：隐藏;了..
#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);
}
Demo 2(剪辑演示)
