When using column-count, overflowing content completely disappears in all but first column, why?

Question

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>

Answer 1

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)

Answer 2

I spent quite a bit of time investigating this problem and found the suggestion to add the CSS property will-change: transform; to the items inside the column layout. For example:

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

Answer 3

Please find a working example of my ANSWER, I have tested in Firefox & Chrome.

CODE HTML
<!--you can add as many divs as you like it will work -->
<div id="main_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CODE CSS
#main_wrap{
  width:100%;
}

#main_wrap > div{
  width:20%; #***
  height:250px; #***
  background:whitesmoke;
  float:left;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  border:2px solid gray;
  margin-left: 10.75%; #***
  margin-bottom:1rem; #***
}

#main_wrap > div:after{
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  right:-20px;
}

I have recreate the layout shown in your example, but you might need to make some changes to get your final layout. For it play with the marked(#***) properties