Box-shadow trimmed in CSS columns in Chrome

Question

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 C

Answer 1

this should work too : http://codepen.io/anon/pen/fiHCv

(from my comment to get your feeling about it :) )

It might work using calc() to reduce width of blocks to let shadows being seen and rework margin and padding for nicer layout

div#column-container {   
    /* Set 2 columns*/
    column-count: 2;
  column-gap:0;
  width:80%;
  margin:auto;
  padding:20px 0;
}

div#column-container div {
    background-color: yellow;
    box-shadow: 0px 0px 15px #000; 

    /* Make sure that yellow div is not split between columns */
    display: inline-block;
  /* leave room for shadow to be drawn */
    width: calc(100% - 30px);
    /* the rest - just to better present the problem */
    height: 70px;
    margin: 20px;    
}

manage margin and padding, so top of columns may be on same vertical level and fit to your grid