Как убрать баг у списка, после разбиения его на 2 столбца?

Question

[Роман Говоров]

Разбил ul список меню на 2 столбца, код ниже:

header#header.header ul li ul.dropdown-menu{
    width: auto;
    top: 35px;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 2;
    -webkit-column-rule: 1px solid lightgray;
    -moz-column-rule: 1px solid lightgray;
    column-rule: 1px solid lightgray;
}

Но при наведении появился подобный баг с последним пунктом в столбце, почему-то пару его пикселей ушло во второй столбец...



Как исправить?

Answer 1

[Рома Зварич]

Чтобы запретить частичный перенос элементов в другую колонку, используйте для элементов свойство break-inside: avoid;

Comments

[Роман Говоров]

Спасибо! Почитаю про это свойство!