使用列计数时，除了第一列之外，所有内容都完全消失了，为什么? [英] When using column-count, overflowing content completely disappears in all but first column, why?

问题描述

在包装器中使用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> 

解决方案

老实说，我不知道为什么会发生这种情况，我正在寻找文档中是否指定了此行为的文档，我想检查它是故意的还是错误.目前，我正在使用

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

它有效...所以在#main_wrap > div中添加以上属性，我认为如果排除供应商前缀，则transform: translateX(0);就足够了.

演示

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

问题84030 :CSS 3列错误(溢出:类似于隐藏功能)

绝对位置元素被裁剪，就好像有一个 溢出:隐藏应用于框.但是，应用溢出: 可见或其他任何规则都不能解决问题

---

我对此进行了更多的思考，因为我建议了第一个解决方案，即我随机插入了属性并使其起作用，还有一种方法可以通过使用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 (剪辑演示)

When using column-count in a wrapper, and the containers in the wrapper have border-radius applied, and content in the container is overflowing, the content completely disappears in all the columns, except the first one.

Here is my example: https://jsfiddle.net/f4nd7tta/
The red semi-circle is only visible in the first column, why?

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

解决方案

I honestly have no idea why this happens, I am looking the docs if they have specified this behavior, I want to check whether its intentional or it's a bug. For now I am using

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

And it works... So add the above properties in #main_wrap > div and I think if you are ruling out the vendor prefixes than transform: translateX(0); is sufficient.

Demo

Ok, I think it's a 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

---

I thought more over this, as I suggested the first solution which I randomly inserted the properties and it worked, there is also a way where you can legally do what you are doing by using a clip property and you won't need overflow: hidden; anymore..

#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 (Clip Demo)

这篇关于使用列计数时，除了第一列之外，所有内容都完全消失了，为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！