React/JavaScript中如何解决overflow-x:visible与overflow-y:auto共存失效问题

解决方案 #

方案1（首推，无兼容性问题，适配所有场景）：使用React Portal渲染下拉菜单

这是React生态下解决overflow裁剪嵌套元素问题的标准方案，原理是将下拉菜单组件渲染到侧边栏之外的DOM节点（通常是全局body），完全脱离侧边栏的overflow上下文，自然不会被截断，只需要动态计算下拉菜单和侧边栏项的相对位置即可。
代码示例：

import { createPortal, useState, useRef, useEffect } from 'react'

// 侧边栏项组件
const SidebarItemNew = () => {
  const [showDropdown, setShowDropdown] = useState(false)
  // 绑定侧边栏项的DOM节点，用于计算位置
  const itemRef = useRef(null)
  const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 })

  // 下拉展开时计算位置
  useEffect(() => {
    if (showDropdown && itemRef.current) {
      const rect = itemRef.current.getBoundingClientRect()
      setDropdownPos({
        // 加上页面滚动偏移，避免滚动后位置错位
        top: rect.top + window.scrollY,
        // 侧边栏项右侧再加8px间距，可自定义调整
        left: rect.right + 8
      })
    }
  }, [showDropdown])

  return (
    <div 
      ref={itemRef}
      onClick={() => setShowDropdown(!showDropdown)}
    >
      侧边栏项文本/图标
      {/* 用Portal把下拉渲染到body下 */}
      {showDropdown && createPortal(
        <div 
          className="absolute w-48 bg-white border rounded shadow z-50"
          style={{ top: dropdownPos.top, left: dropdownPos.left }}
        >
          <div>选项1</div>
          <div>选项2</div>
          <div>选项3</div>
        </div>,
        document.body
      )}
    </div>
  )
}

// 侧边栏组件无需特殊设置，正常保留overflow-y:auto即可
const App = () => {
  return (
    <Sidebar className="h-96 overflow-y-auto">
      <SidebarItemNew />
      {/* 其他侧边栏项 */}
    </Sidebar>
  )
}

方案2（轻量布局hack，适合下拉宽度固定的场景）

如果不想修改下拉的渲染逻辑，可以通过给侧边栏添加水平内边距+负边距的方式，撑开overflow的裁剪范围，同时不影响原有布局的占位宽度：

<Sidebar className="h-96 overflow-y-auto pr-[200px] mr-[-200px]">
  {/* 上述的200px替换为你的下拉菜单实际宽度即可 */}
  <SidebarItemNew className="relative">      
       <DropdownOptions className="absolute left-full ml-2"/>
  </SidebarItemNew>     
</Sidebar>

注意：使用该方案需要确保侧边栏的外层父容器没有设置overflow-x:hidden，否则下拉还是会被父容器截断。

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