CSS3 columns cutting off <li>s

Question

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?

Answer 1

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!