When Using Column-Count, Overflowing Content Completely Disappears in All But First Column, Why

When using column-count, overflowing content completely disappears in all but first column, why?

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)

CSS Column Count - Change order

Why are you using columns when you want a row based order ? Looks like a job for the flex model. Without changing your HTML you can do this:

#container {

    position: relative;

    width: 600px;

}

#column-wrapper {

    display: flex;

    flex-wrap: wrap

}

#column-wrapper .column {

    display: inline-block;

    width: calc(30% - 20px);

    padding: 20px 0;

    margin: 20px;

    background-color: green;

    text-align: center;

    font-size: 20px;

    font-weight: bold;

    color: #fff;

}

<div id="container">

    <div id="column-wrapper">

        

        <div class="column">

            <span>1</span>

        </div>

        

        <div class="column">

            <span>2</span>

        </div>

        

        <div class="column">

            <span>3</span>

        </div>

        

        <div class="column">

            <span>4</span>

        </div>

        

         <div class="column">

            <span>5</span>

        </div>

        

         <div class="column">

            <span>6</span>

        </div>

        

    </div>

    

</div>

Elements not showing when using column count

It appears that Firefox is doing something weird here which it is not supposed to do. What you can do to fix the problem is position the span absolute instead of using a float. The only things required are making the container's position relative, changing it's position to absolute, and set right and top to 0px (or in this case, the correct padding).

The following should give the same result, and also work in FireFox

html {

  font-family: Arial;

}

.outer {

  width: 1000px;

}

.inner {

   column-count: 2

}

div.inner div {

 border-bottom: solid 1px #ccc;

 padding: 6px 15px 6px 0;

  position:relative;

}

.pull-right {

  position:absolute;

  right:15px;

  top:6px;

}

<div class="outer">

  <div class="inner">

    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Confined Space Rescue</div>

    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Enter Confined Space</div>

    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Gas Test Atmospheres</div>

    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Operate Breathing Apparatus</div>

    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Working @ Heights</div>

    <div class="expiry-status-0"><span class="pull-right ">Feb 22 2022 </span>Drivers Licence - Car (New Zealand)</div>

    <div class="expiry-status-0"><span class="pull-right ">Feb 19 2019 </span>Fit Test Report </div>

    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Health and Safety</div>

    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>INERT - Inert Entry Technician Course</div>

    <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>Offshore Facility Abandonment & Sea Survival</div>

    <div class="expiry-status-0"><span class="pull-right ">Aug 28 2019 </span>Passport</div>

    <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>TBOSIET (Include HUET)</div>

    <div class="expiry-status-0"><span class="pull-right "></span>Torquing / Tensioning</div>

    <div class="expiry-status-0"><span class="pull-right "></span>White Card - QLD</div>

    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Work in Accordance with an Issued Permit</div>

  </div>

</div>

Bullets disappear with CSS3 columns

I think the bullets are there, but they're being rendered to the left of the viewing area. Try:

list-style-position: inside;

CSS transforms within CSS columns disappear (Chrome)

Actually the problem is your transform: translateY(0px) in ul.main > li which is a 2D transform...then you are using rotateZ in ul.main ul a which is 3D transform which causing this visibility issue...

So to resolve this either remove the transform: translateY(0px) from ul.main > li which I think is better as it has no mean to apply translateY(0px)...

..or apply backface-visibility: hidden to the ul.main ul a if you have any further plans to use translateY(0px)

ul.main ul a {
  -webkit-transform: rotateZ(5deg);
  transform: rotateZ(5deg);
  backface-visibility: hidden;
}

Updated Codepen ▸

CSS fixed column on table disappears on iPhone web browser

I started removing your code piece by piece to see when the problem goes away. Removing <div class="mscroll"> made the problem go away. So I took closer look at the css and from there the problem seems to be in:

-webkit-overflow-scrolling: touch;

Remove that from .mscroll and it will work on iphone.

I did my best on trying to understand why this happens. But I don't seem to find any reason for it. I would assume, that your code is a bit messy and probably there is a conflict somewhere.

Absolutely positioned tooltip over Multi-column Layout

The only solution I could find that did not involve javascript was to use an ugly hack - by adding translateZ(0); to the tooltips they appears 'above' the other columns.

It's not ideal but from my research there doesn't yet seem to be a way to allow overflow between CSS columns.

When Using Column-Count, Overflowing Content Completely Disappears in All But First Column, Why