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>

Tutankhamen

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)

Dellinger

It's also taking absolutely positioned elements into consideration when rebalancing the columns. For example, I have a two-column div with a list of color swatches (4 in each column). A color picker that's situated within each swatch pops up when clicked. The color picker has absolute positioning, and the swatch has relative, so the picker shouldn't impact anything. However, when I click swatches near the bottom, particularly the last one in the second column... the swatches all shift as though it's taking the color picker into consideration when computing the required container height. – Alliber

first fix does work for me in chrome, however moves other divs down a little. – Hudson

transform: translateX(0); works! Safari 13.0 doesn't have this issue, only 13.1 does. – Roomette

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>

Jellyfish

YES! This fixed the issue I was having. I have a multi-column layout of <mat-expansion-panel> (in an Angular project), and adding "will-change: transform" totally fixed the clipping issue that I was seeing in Chrome. Thanks! – Eardrop

Answer 3

Seems like making the child component width: 100% enables the columnCount: ${window.innerWidth/300} abstraction of parent-parent to maintain display of child, I tried to stop iOS from focusing on a <textarea/> I had in it. Also hot tip is to make parent-parent height: 100% and overflowX: auto right.... edit: experimenting with reversal led me to give this answer, and fixing this bug again, but this time by using columnGap:"1px"

Misjoinder

Answer 4

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

Ganister

This does not answer the question asked. He asks Why does it not show when using columns. You are answering that question by giving an example on how to achieve the same result without columns. – Bookmark

You said "This does not answer the question asked. " and then you said " You are answering the question ". I'm a bit confuse right now. But anyways if you read the answer marked as the best you can see that there is a bug when using this property 'col-count'. So I help by giving a way to achieve the same result. – Ganister

Yeah sorry i wrote that poorly. Yes, there is a bug thats causing the behaviour. But answering Why does this happen? with Do this is not answering the question at all. – Bookmark