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

Question

Когда используешь 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>

Answer 1

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

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

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

демонстрация

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

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

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

---

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

Answer 2

Я потратил немало времени на изучение этой проблемы и нашел предложение добавить свойство CSS will-change: transform; к элементам внутри макета столбца. Например:

<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

Похоже, что дочерний компонент width: 100% позволяет columnCount: ${window.innerWidth/300} абстракция родитель-родитель для поддержания отображения дочернего элемента, я попытался помешать iOS сосредоточиться на <textarea/>Я был в этом. Также горячий совет - сделать родитель-родитель height: 100% и overflowX: autoправильно .... изменить: эксперименты с разворотом заставили меня дать этот ответ и снова исправить эту ошибку, но на этот раз с помощью columnGap:"1px"

Answer 4

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

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