CSS column count overflow issue in chrome

Question

I'm using the following code to split an unordered list into two columns, which works fine, except for chrome. Here's my code:

.column-list{margin:15px 0 0 0;padding:0;list-style:none;-moz-column-count:2;-webkit-column-count:2;column-count:2}
.column-list li{margin:0 0 15px 0;background:#fff;border-radius:5px;font-size:120%;line-height:normal;font-weight:700;display:block}
.column-list a{padding:25px;display:block}

And here's what's happening (it's splitting the li in half and putting it in the next column):

Answer 1

You need to add break-inside:avoid to your children elements. Fully prefixed, it looks like this:

.column-list li {
  -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
                 break-inside: avoid;
}

Another note on this: technically, the browser only renders a single column and then cuts it at exact points and displays the segments side by side. What this means in practice is that if you have a box-shadow on an element and the cut happens immediately before or after it, you'll see the rendering of that shadow on another column, which obviously looks weird.
Setting appropriate top and bottom margins on the element, according to the size of the box-shadow fixes this issue.