Podczas korzystania z licznika kolumn przepełniona zawartość całkowicie znika we wszystkich kolumnach oprócz pierwszej, dlaczego?

Question

Po użyciu w opakowaniu column-count, a pojemniki w opakowaniu są nakładane, a zawartość w kontenerze jest przepełniona, zawartość całkowicie znika we wszystkich kolumnach, z wyjątkiem pierwszej.

Oto mój przykład: https://jsfiddle.net/f4nd7tta/
Czerwony półokrąg jest widoczny tylko w pierwszej kolumnie, dlaczego?

#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

Szczerze mówiąc nie mam pojęcia dlaczego tak się dzieje, szukam docs, jeśli określono ten problem, chcę sprawdzić, czy jego zamierzone czy jest to błąd. Na razie używam

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

I to działa ... Więc dodać powyższe właściwości w #main_wrap > div i myślę, że jeśli wykluczając prefiksy dostawców niż transform: translateX(0); jest wystarczająca.

Demo

Ok, myślę, że to błąd:

Issue 84030 : CSS 3 Column bug (overflow: hidden like functionality where it shouldn't)

Absolutne rozmieszczone elementy są obcięte jakby istnieje overflow: hidden stosowane do pudełka. Jednak stosowanie overflow: widoczne lub inna reguła nie rozwiąże problemu

---

myślałem bardziej nad tym, jak to sugerował pierwsze rozwiązanie, które ja przypadkowo włożona właściwości i to działało, nie ma również sposób, w którym można legalnie robić to, co robisz za pomocą właściwość clip i nie trzeba będzie już 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); 
} 

Demo 2(Klip Demo)

Answer 2

Proszę znaleźć działający przykład mojego ANSWER, testowałem w przeglądarce 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; 
} 

Mam odtworzyć układ pokazany w przykładzie, ale może być konieczne wprowadzenie pewnych zmian, aby uzyskać ostateczny układ. Gra się z zaznaczonymi (# ***) właściwościami