Обнаружение переполнения пунктов меню не всегда рассчитывается правильно ⇐ CSS

[Anonymous]

Я пытаюсь вычислить, есть ли в горизонтальном меню место для всех элементов меню, а если нет, то помещаю переполненные элементы в раскрывающийся список.
Вот что у меня есть. Это работает - почти - потому что иногда рассчитывается неправильно. Попробуйте изменить размер окна, вы увидите что-то вроде этого: (на этом рисунке элементы не остаются в исходном порядке)
[img]https: //i.sstatic.net/83GZmfTK.png[/img]

Код: Выделить всё

const nav = document.querySelector(".navbar");
const contentBar = nav.querySelector(".navbar-nav");
const navItems = document.querySelectorAll(".navbar-nav > li:not(.grouped)");
const allItems = contentBar.querySelectorAll('li');
const dropdown = nav.querySelector(".grouped-content");
const more = nav.querySelector(".grouped");

const update = () => {
// Show all items for exact calculation
allItems.forEach((item) => {
item.classList.remove('d-none');
});

let avaliableWidth = nav.offsetWidth;
let stopWidth = more.offsetWidth;
let subitems = [];
dropdown.innerHTML = "";

navItems.forEach((item, i) => {
// Calculate if menu items are wider than navbar
if (avaliableWidth >  stopWidth + item.offsetWidth) {
stopWidth += item.offsetWidth;
} else {
// Not enough space
let li = document.createElement("li");
li.innerHTML = item.innerHTML;
// Append overflowing menu items to dropdown
dropdown.appendChild(li);
// Hide items that won't fit in menu
item.classList.add('d-none');
// Count items in dropdown
subitems.push(i);
}
})

// Hide "More" item if it has no children
if (!subitems.length) {
more.classList.add('d-none');
}
}

update();
window.addEventListener("resize", update);

Код: Выделить всё

.nav-link {
white-space: nowrap;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
}

Код: Выделить всё

[*]


[list]
[url=#]Item 1[/url]
[*][url=#]Item 22[/url]
[*][url=#]Item 333[/url]
[*][url=#]Item 4444[/url]
[*][url=#]Item 5555555[/url]
[*][url=#]Item 66[/url]
[*][url=#]Item 7777777777777[/url]
[*][url=#]Item 8[/url]
[*][url=#]Item 999999[/url]
[*][url=#]Item 10101010[/url]
[*][url=#]Item 1111[/url]
[*][url=#]Item 12121212[/url]
[*][url=#]Item 131313131313[/url]
[*][url=#]Item 1414[/url]
[*][url=#]Item 15[/url]
[*][url=#]Item 16161616[/url]
[*][url=#]Item 1717[/url]
[*][url=#]Item 18181818181818[/url]
[*][url=#]Item 191919[/url]
[*][url=#]Item 20[/url]
[*][url=#]Item 212121[/url]
[*][url=#]Item 2222[/url]
[*]
[url=#]More[/url]
[/list]

Чего мне не хватает?

Подробнее здесь: https://stackoverflow.com/questions/792 ... -correctly