水平菜单溢出菜单项检测计算不准确问题求助

各位好，我最近在做一个水平菜单的溢出处理功能：判断水平导航栏能不能放下所有菜单项，如果空间不足，就把溢出的项移到一个下拉菜单里。

目前这套逻辑勉强能跑，但计算经常不准，尤其是手动调整窗口大小的时候，会出现菜单项顺序错乱的问题——原本应该按顺序排列的菜单项，位置被打乱了，没有保持初始的展示顺序。

以下是我目前的实现代码：

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");
// 注：原代码此处有截断，以上为现有可展示的部分

有没有大佬能帮忙看看，为什么计算会出现偏差，调整窗口时菜单项的顺序还会乱掉呀？

备注：内容来源于stack exchange，提问作者Meek