如何实现hover时overflow-x为visible且overflow-y保持scroll？

这是CSS标准明确定义的规则，不是浏览器bug：当overflow-x、overflow-y两个属性中任意一个的取值不是visible或clip时，另一个轴设置的visible值会被浏览器自动强制解析为auto，所以直接通过修改两个轴的overflow属性组合，永远不可能实现「纵向可滚动、横向内容溢出可见」的效果。

• 双层容器方案（兼容性最好，无需JS，覆盖99%以上主流浏览器）
  用两层嵌套结构拆分滚动能力和内容承载能力，绕开overflow的组合限制：
  1. 外层作为纯滚动容器：设置固定高度、overflow-y: scroll，不要添加overflow-x相关属性，也不要给这个容器设置position: relative、transform、filter这类会生成独立裁剪上下文/层叠上下文的属性
  2. 内层作为内容承载容器：设置宽度100%、position: relative，所有列表项都放在这层容器内
  3. 列表项中需要横向溢出显示的内容（比如hover展示的操作栏、长文本提示、浮层），设置position: absolute，调整定位到目标横向位置，设置足够高的z-index避免被其他元素遮挡
     这个方案下纵向滚动逻辑完全正常，横向溢出的内容不会被滚动容器裁剪，hover时直接展示即可，用Tailwind工具类可以快速实现，不需要额外写自定义CSS。
• overflow: clip方案（适合现代浏览器场景，结构更简单）
  Chrome 90+、Firefox 81+、Safari 16+版本支持overflow的clip取值，这个值不会触发另一个轴的visible强制转换逻辑：
  给容器设置overflow-y: clip、overflow-x: visible，再通过JS监听滚轮、触摸滑动事件，手动修改容器的scrollTop值实现纵向滚动，不需要额外调整DOM结构就能实现目标效果。
• JS动态挂载方案（适合hover触发临时浮层的场景）
  如果需要横向溢出的内容是hover时才出现的临时元素（比如操作菜单、信息提示卡），可以在hover触发时，直接把浮层元素挂载到<body>节点下，通过JS获取当前触发hover的列表项的视口坐标，动态计算浮层的位置，让它视觉上贴合在对应列表项的横向外侧。这种方案完全不受overflow裁剪规则限制，兼容性最好，只需要额外加少量逻辑处理滚动时的浮层位置同步、hover移出时的元素卸载即可。

• 不要尝试用负margin、内边距撑开容器的方式绕开裁剪，这类写法会破坏滚动容器的尺寸计算，很容易出现意外的横向滚动条、内容错位问题。
• 如果浮层需要跟随列表项同步滚动，优先选双层容器方案，不需要额外写位置同步逻辑，维护成本最低。

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