求助：Tailwind使用overflow-y-scroll时X轴溢出内容被裁切

核心问题在于：当给元素设置overflow-y-scroll时，浏览器会自动将overflow-x隐式设为auto或hidden，直接限制了X轴方向的内容溢出，导致悬停时的链接名称被容器裁切。以下是两种可行的解决思路：

方案一：用绝对定位让文本脱离容器约束 #

保留侧边菜单的overflow-y-scroll，但让悬停显示的文本块脱离容器的X轴范围，不受裁切影响。

示例代码：

<div class="w-16 h-[400px] overflow-y-scroll bg-gray-100">
  <!-- 单个菜单项 -->
  <div class="relative flex items-center p-2 hover:bg-gray-200">
    <!-- 菜单图标 -->
    <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
    </svg>
    <!-- 悬停显示的链接名称 -->
    <span class="absolute left-full top-0 ml-2 px-2 py-2 bg-white shadow-md whitespace-nowrap opacity-0 invisible hover:opacity-100 hover:visible transition-all">首页</span>
  </div>
  
  <!-- 重复上述结构添加更多菜单项 -->
</div>

• 给菜单项设置relative作为定位参照，文本块用absolute left-full完全移出侧边容器
• whitespace-nowrap保证文本不换行，opacity-0 invisible默认隐藏，悬停时通过hover:类触发显示

方案二：用clip-path替代overflow的强制裁切 #

如果不想用绝对定位，可以通过自定义clip-path规则，实现仅Y轴滚动的同时允许X轴内容溢出。

步骤1：编写HTML结构 #

<div class="w-16 h-[400px] overflow-x-visible overflow-y-auto clip-path-inset-y-0">
  <!-- 单个菜单项 -->
  <div class="flex items-center p-2 hover:bg-gray-200">
    <!-- 菜单图标 -->
    <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
    </svg>
    <!-- 悬停显示的链接名称 -->
    <span class="ml-2 whitespace-nowrap opacity-0 invisible hover:opacity-100 hover:visible transition-all">用户管理</span>
  </div>
  
  <!-- 重复上述结构添加更多菜单项 -->
</div>

步骤2：配置Tailwind自定义工具类 #

先安装tailwindcss-clip-path插件，再在配置文件中添加自定义clip-path规则：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      clipPath: {
        'inset-y-0': 'inset(0 0 0 0)',
      },
    },
  },
  plugins: [
    require('tailwindcss-clip-path'),
  ],
}

• clip-path: inset(0 0 0 0)会精确约束容器的可见区域仅垂直方向滚动，不会限制X轴内容溢出

注意事项 #

• 方案一兼容性更好，无需额外插件，适合大多数场景
• 方案二视觉效果更自然，但需要依赖第三方插件
• 所有悬停文本都要添加whitespace-nowrap，避免文本换行导致显示不全

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