Tailwind CSS 带悬浮提示的可滚动侧边栏溢出问题排查

两个核心问题导致功能异常：

1. Flex布局下的滚动容器没有设置正确的收缩属性，高度会被内部图标列表直接撑开，纵向滚动逻辑本身存在缺陷
2. 遵循CSS默认overflow规则：当元素任意一个轴向设置了scroll/auto/hidden这类非visible的overflow值时，另一个轴向的overflow会被自动从visible重置为auto，超出宽度的tooltip会被判定为溢出内容，要么触发横向滚动条，要么被容器裁切。

1. 调整侧边栏容器类名 #

修正滚动容器的高度约束和overflow属性，替换原有aside和内部滚动div代码：

<aside className="fixed top-0 left-0 h-screen w-16 m-0 flex flex-col bg-red-800 text-white shadow-lg overflow-visible z-40">
    <div className='flex-1 min-h-0 overflow-y-auto overflow-x-visible py-1'>
        <SidebarIcon text="asdf" icon={0} />
        {/* 剩余原有SidebarIcon列表保持不变 */}
    </div>
</aside>

新增类的作用：

• 给外层aside加overflow-visible z-40：保证侧边栏本身不裁切超出宽度的tooltip，同时层级足够高不被页面其他内容遮挡
• 给内部滚动div加flex-1 min-h-0：让div自动占满aside的剩余可用高度，同时允许div收缩到父容器高度范围内，这时候纵向滚动规则才会真正生效
• 给内部滚动div加overflow-y-auto overflow-x-visible：显式声明纵向超出时自动显示滚动条、横向超出内容正常可见，覆盖浏览器默认的overflow自动重置逻辑，不会触发横向滚动条
• 给内部滚动div加py-1：上下留少量内边距，避免首尾图标贴边

如果你需要侧边栏滚动条常驻显示，把滚动div的overflow-y-auto替换成overflow-y-scroll即可，其他配置不变。

2. 修复tooltip样式 #

调整tooltip的层级和鼠标事件响应规则，替换原有.sidebar-tooltip样式代码：

.sidebar-tooltip{
  @apply absolute w-auto p-2 m-2 min-w-max left-14 z-50 pointer-events-none;
  @apply rounded-md shadow-md;
  @apply text-white bg-gray-900;
  @apply text-xs font-bold;
  @apply transition-all duration-100 scale-0 origin-left
}

新增类的作用：

• z-50：让tooltip层级高于侧边栏，不会被遮挡
• pointer-events-none：让tooltip不响应鼠标事件，避免鼠标移到tooltip上时图标hover状态意外消失

3. 修复JSX语法小问题 #

SidebarIcon组件里的span标签用了原生HTML的class属性，React JSX环境下需要改成className避免控制台警告：

<span className='sidebar-tooltip group-hover:scale-100'> { text } </span>

改完之后纵向滚动功能正常，hover图标时tooltip会正常显示在侧边栏外侧，不会出现横向滚动条，也不会被裁切。

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