CSS: border-bottom on last li in multiple columns ul appears at wrong position

Question

I have <ul> with 2 columns.

border-bottom of the last item in first column appears at the top of the second column.

See fiddle: https://jsfiddle.net/6b7bkomo/

ul {
  column-count: 2;
}

li {
  list-style-type: none;
  border-bottom: 1px solid red;
  box-sizing: border-box;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>

Only happens with odd number of list items. Happens in Chrome and Edge, does not happens in FireFox.

Why does it happen?

How can I fix it?

Thanks!

Answer 1

You have to add break-inside: avoid-column; to your <li> element:

ul {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}  
li {
  break-inside: avoid-column;
  list-style-type: none;
  border-bottom: 1px solid red;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>

You define two columns, so the 7 <li> elements are equal moved to these two columns. The fourth row starting on the first column and ending in the second column (50% on first column / 50% second column).

Answer 2

You can use column-break-inside inside li element

ul {
  column-count: 2;
}

li {
  list-style-type: none;
  border-bottom: 1px solid red;
  box-sizing: border-box;
  column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>

Answer 3

Check the below code; this may help you. I checked this code; it is working fine.

<style>
.menus 
{
    column-count: 2;
}

.menus li 
{
    list-style-type: none;
    border-bottom: 1px solid red;
    box-sizing: border-box;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
  }
</style>

<ul class="menus">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>