При использовании столбца-столбца переполняющий контент полностью исчезает во всех, кроме первого столбца, почему?

При использовании 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>

Ответы

Ответ 1

Я честно понятия не имею, почему это происходит, я смотрю документы, если они указали это поведение, я хочу проверить, является ли это преднамеренным или это ошибка. На данный момент я использую

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

И он работает... Поэтому добавьте вышеуказанные свойства в #main_wrap > div, и я думаю, что если вы исключаете префиксы поставщиков, чем transform: translateX(0);, то достаточно.

Демо

Хорошо, я думаю, что это ошибка:

Проблема 84030: CSS 3 Ошибка столбца (переполнение: скрытое, как функция, где он не должен)

Абсолютно позиционированные элементы обрезаются, как если бы переполнение: скрытый, примененный к ящику. Однако, применяя переполнение: видимое или любое другое правило не устраняет проблему.

Я подумал об этом больше, так как я предложил первое решение, которое я случайно включил в себя свойства, и это сработало, есть также способ, которым вы можете законно делать то, что вы делаете, используя свойство clip, и вы выиграли ' t нужно 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 (клип-демонстрация)

Ответ 2

Пожалуйста, найдите рабочий пример моего ANSWER, который я тестировал в 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;
}

Я воссоздал макет, показанный в вашем примере, но вам может потребоваться внести некоторые изменения, чтобы получить окончательный макет. Для этого игра с отмеченными (# ***) свойствами