css – 当使用列数时,溢出的内容完全消失,但是第一列,为什么？

当在包装器中使用列计数，并且包装器中的容器具有border-radius，并且容器中的内容溢出时，除了第一个内容之外，所有列中的内容完全消失。

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

CSS：

#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;
}

HTML：

<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);足够了。

Demo

好的，我觉得这是一个bug：

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

我更多地想到这一点，正如我提出的第一个解决方案，我随机插入的属性，它的工作，还有一种方法，你可以合法地做你正在做的使用剪辑属性，你不会需要溢出：隐藏;了..

#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(剪辑演示)

原文地址：https://www.jb51.cc/css/218188.html