CODEWITHSUNDEEP
htmlcssgoogle-chrome
SoulieBaby
SoulieBaby

Reputation: 5471

CSS column count overflow issue in chrome

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):

enter image description here

Upvotes: 4

Views: 1473

Answers (1)

tao
tao

Reputation: 90068

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.

Upvotes: 8

Related Questions