导航项溢出应避免 overflow: hidden，改用 visible/ unset 并结合 flex-shrink、min-width 与 resizeobserver 动态折叠，隐藏时用 visibility: hidden 或 clip-path 保障可访问性。
导航项超出容器时直接消失？别用 overflow: hidden 粗暴截断
Flex 导航栏溢出后内容被切掉，不是因为没写 flex-wrap，而是误把容器设成了 overflow: hidden —— 这会把下拉菜单、焦点轮廓、阴影甚至部分文字边缘全干掉，尤其在 Safari 下更明显。
真正该做的是让多余导航项「视觉上收起来但逻辑上还在」，比如加个 … 按钮或折叠进汉堡菜单。前提是先确认 Flex 容器本身不截断：
-
overflow必须是visible或unset（默认值） - 父容器不能有
min-width强制撑宽，否则 Flex 项无法收缩 - 每个导航项需设
flex-shrink: 1（默认就是 1，但显式写出来防覆盖）
用 flex-grow + min-width 控制自动缩放临界点
想让导航项在空间不足时等比缩小、到某个宽度就停止（比如文字不被压成“…”），得靠组合控制：
- 给每个
<li>设flex: 1 1 auto（即flex-grow: 1,flex-shrink: 1,flex-basis: auto） - 再加
min-width: 80px（根据文字长度调，中文建议 ≥72px） - 关键：容器必须有明确宽度（
width: 100%或max-width），否则flex-grow不生效
这样浏览器会在总空间不足时，先压缩所有项到 min-width，再触发后续隐藏逻辑 —— 这是判断「何时该折叠」的可靠依据。
立即学习“前端免费学习笔记（深入）”；
监听 resize 并计算剩余空间？别手写，用 ResizeObserver
手动算每个 <li> 宽度 + 间距 + 边框再比对容器宽度，容易漏掉字体加载延迟、伪元素、滚动条宽度等变量，而且重排频繁。
现代方案是用 ResizeObserver 监听容器尺寸变化，只在实际溢出时更新 UI：
const nav = document.querySelector('.nav');
const observer = new ResizeObserver(() => {
const containerWidth = nav.offsetWidth;
const totalItemsWidth = Array.from(nav.children).reduce((sum, el) => sum + el.offsetWidth, 0);
if (totalItemsWidth > containerWidth) {
showMoreButton(); // 或切换为折叠状态
}
});
注意：ResizeObserver 不监听子元素内容变化（如文字换行），所以得确保导航项内部不发生动态宽高变化；若用了图标字体或 SVG，记得设固定宽高。
折叠后点击 … 怎么精准展开对应项？别用 display: none
把多余项设成 display: none 再展开，会导致布局重排、焦点丢失、屏幕阅读器跳过 —— 尤其当折叠项里有下拉菜单时，display: none 会让整个子树不可访问。
安全做法是用视觉隐藏而非移除：
- 用
visibility: hidden+position: absolute移出视口（保留占位和可访问性） - 或用
clip-path: inset(100%)隐藏但保持渲染流 - 务必给折叠按钮加
aria-expanded和aria-controls，指向被控元素 ID
最常被忽略的一点：折叠逻辑必须响应键盘操作 —— Tab 键仍要能进入隐藏项（用 visibility: hidden 可以，display: none 不行），否则 WCAG 2.1 AA 直接不通过。
