CSS3 columns cutting off <li>s

css, html, multiple-columns

Solution

This thread is a bit old, but I had the same issue recently and used this to prevent the list items from getting cut:

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

More info on CSS-Tricks

Hope it helps anyone in the same boat!

Problem

I am trying to use css3 columns with a list (`<li>`). I am having trouble making it work. I defined a div that wraps the `<ul>` ``` div.ul-container { -moz-column-width: 310px; -moz-column-gap: 10px; -webkit-column-width: 310px; -webkit-column-gap: 10px; column-width: 310px; column-gap: 10px; } ``` This works fine when I have three `<li>`s or above. But when I have less than that (2 or 1) it seems to cut off the `<li>`. I tried defining a `min-height` which didn't work as well (it treated it as height). screenshot: any ideas?

Original source