react-bootstrap Navbar设置overflow-x:hidden后下拉菜单显示异常问题

该问题由CSS overflow 属性的固有渲染规则导致：当元素任意一个轴的overflow设置为非visible值时，另一个轴即使显式声明overflow: visible，浏览器也会强制将其解析为auto。直接给Navbar根节点设置overflow-x: hidden时，垂直方向实际会被计算为auto，直接导致溢出的下拉菜单被裁剪、撑开容器高度并触发垂直滚动，无法同时满足水平滚动、下拉菜单正常显示两个需求。

将滚动逻辑从Navbar根节点转移到内部导航项容器，通过分层设置定位基准，让下拉菜单脱离滚动容器的溢出限制，同时保留水平滚动能力。

1. 组件逻辑调整 #

将滚动ref、滚轮监听事件绑定到内部的Nav节点，Navbar根节点不做任何溢出限制：

import { MutableRefObject, useRef } from 'react';
import { Navbar, Container, Nav, NavDropdown, NavLink } from 'react-bootstrap';

export const NavBar = () => {
  const scrollRef: MutableRefObject<HTMLElement | null> = useRef(null);
  const onWheel = (e: WheelEvent) => {
    e.preventDefault();
    e.stopPropagation();
    const container = scrollRef.current;
    if (!container) return;
    container.scrollTo({
      left: container.scrollLeft + e.deltaY,
    });
  };
  const demoNavItems = Array(35).fill(<NavLink to="">Example</NavLink>);
  return (
    <Navbar bg="light">
      <Container className="flex-nowrap">
        <Nav 
          className="me-auto nav-scroll-container" 
          ref={scrollRef} 
          onWheel={onWheel}
        >
          <NavDropdown title="Dropdown" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
          </NavDropdown>
          {demoNavItems}
        </Nav>
      </Container>
    </Navbar>
  );
};

2. 样式配置 #

/* Navbar作为下拉菜单的定位父级，保持默认overflow: visible */
nav.navbar {
  flex-wrap: nowrap;
  position: relative;
}

/* 内部导航容器单独实现水平滚动 */
.nav-scroll-container {
  flex: 1;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  /* 隐藏默认横向滚动条，按需使用 */
  scrollbar-width: none;
}
.nav-scroll-container::-webkit-scrollbar {
  display: none;
}

/* 下拉触发器取消相对定位，避免菜单被滚动容器的overflow裁剪 */
.nav-scroll-container .nav-item.dropdown {
  position: static;
}

/* 下拉菜单绝对定位脱离文档流，不撑高父容器 */
.nav-scroll-container .dropdown-menu {
  position: absolute;
  top: 100%;
  /* 可根据实际布局调整偏移值，或通过JS动态对齐触发器 */
  left: 12px;
}

方案效果 #

• 导航项超出容器宽度时，可通过鼠标滚轮触发水平滚动
• 下拉菜单完全展示，不会被任何容器裁剪
• 下拉菜单为绝对定位，不占据文档流位置，不会撑开父元素高度，也不会触发垂直滚动

进阶优化：如果需要下拉菜单和触发器精准对齐，可在下拉菜单打开时，通过getBoundingClientRect获取触发器的水平偏移，动态设置.dropdown-menu的left值即可。

内容的提问来源于stack exchange，提问作者Michael Goodwin