buli buli - 1 year ago 242
CSS Question

Box-shadow trimmed in CSS columns in Chrome

I want the block elements inside CSS columns to have box shadow. The following, simplified code renders as expected in IE10 and Firefox 21, but in current Chrome version (28.0.1500.72) shadows near the column sides are trimmed.

The images present results in IE/FF (on the left), and Chrome on the right:

Code rendered in IE/Firefox
Code rendered in Chrome

(there's also some vertical shift, but it's not an issue)

Here's the jsfiddle:

div#column-container {
/* Set 2 columns*/
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
div#column-container div {
background-color: yellow;
/* set shadow for yellow elements */
box-shadow: 0px 1px 3px #000;
-webkit-box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
box-shadow: 0px 0px 15px #000;
/* Make sure that yellow div is not split between columns */
display: inline-block;
width: 100%;
/* the rest - just to better present the problem */
height: 70px;
margin-top: 0;
margin-bottom: 20px;

<div id="column-container">
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>
<div>box 4</div>
<div>box 5</div>
<div>box 6</div>

Am I misusing some of those properties, or this is a Chrome issue? How can it be fixed at the moment?

Answer Source

You could use flexbox for this instead of css columns.


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


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download