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?
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.
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)