Box-shadow trimmed in CSS columns in Chrome

Just happened upon a potentially more straightforward solution that seems to work. Applying transform: translateZ(0); to the elements with box-shadows seems to be resolving this issue. In the supplied code, you would add this to your div#column-container div rule.

.container{
  break-inside: avoid;
  column-count: 2;
  column-gap: 2rem;
}
.box{
  border-radius: 4px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
  padding: 1rem;
  break-inside: avoid;
  transform: translateZ(0);
}

https://codepen.io/MarkitDigital/pen/RdLoRG

You could use flexbox for this instead of css columns.

FIDDLE

NB: This currently doesn't work in Firefox because it still doesn't support the flex-wrap property, however according to caniuse - this will be supported in version 28

CSS

div#column-container {   
    height: 270px; /* NB: IE requires the height property. max-height won't work on IE)*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

EDIT: (Updated FIDDLE which includes support for Firefox)

As per @buli's suggestion to temporarily use the -moz-colums-count for Firefox as long as flex-wrap is not supported:

Well, you could do this with the @supports which allows us to perform feature queries - sort of like Modernizr, but with CSS.

The good thing here, is that Firefox supports them.

So if I add the following code: (updated as per Pavlo's suggestion)

@supports (not (flex-wrap: wrap)) and (-moz-columns: 2) {
    div#column-container { 
        -moz-column-count: 2;
        column-count: 2;
        display: block;
        width: 50%;
    }
}

Now, Firefox will use CSS columns, whereas other browsers will use flexbox.