Bei der Verwendung von column-count verschwindet der überlaufende Inhalt vollständig in der ersten Spalte, warum?

Question

Wenn column-count in einem Wrapper verwendet wird und die Container im Wrapper border-radius angewendet haben und Inhalt im Container überläuft, verschwindet der Inhalt vollständig in allen Spalten außer dem ersten.

Hier ist mein Beispiel: https://jsfiddle.net/f4nd7tta/
Der rote Halbkreis ist nur sichtbar in der ersten Spalte, warum?

#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

Ich habe ehrlich gesagt keine Ahnung, warum dies geschieht, ich die Dokumentation suchen, wenn sie dieses Verhalten angegeben haben, möchte ich, ob seine absichtlich überprüfen oder es ist ein Fehler. Denn jetzt ich bin mit

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

Und es funktioniert ... So fügen Sie die oben genannten Eigenschaften in #main_wrap > div und ich denke, wenn Sie die Verkäufer-Präfixe als transform: translateX(0); ausreichend ist, auszuschließen sind.

Demo

Ok, ich denke, es ist ein Fehler:

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

Die absoluten positionierte Elemente abgeschnitten werden, als ob es ein Überlauf ist: auf das Feld angewendet versteckt. Doch die Anwendung Überlauf: sichtbar oder jede andere Regel behebt das Problem nicht

---

dachte ich mehr über diese, als ich die erste Lösung vorgeschlagen, die ich die Eigenschaften zufällig eingeführt und es hat funktioniert, gibt es auch ein Weg, wo man legal tun können, was Sie mit einer clip Eigenschaft tun, und Sie werden mehr .. nicht overflow: hidden; brauchen

#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

Finden Sie ein funktionierendes Beispiel meiner ANSWER, ich habe in Firefox & Chrome getestet.

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

Ich habe das in Ihrem Beispiel gezeigte Layout neu erstellt, aber Sie müssen möglicherweise einige Änderungen vornehmen, um Ihr endgültiges Layout zu erhalten. Für das Spiel mit den markierten (# ***) Eigenschaften