CSS overflow-x:auto致overflow-y:visible失效？popover被裁剪问题解决

这是CSS溢出规则下的标准化浏览器行为，不属于实现bug：按照规范要求，只要容器任意一个轴的overflow值不是visible，浏览器会强制把相邻轴上声明的visible值计算为auto。也就是说，你写的overflow-x: auto; overflow-y: visible，在浏览器实际渲染时y轴的值会被自动改成auto，自然会把纵向溢出的popover内容裁剪掉，和你全设置visible时的渲染逻辑完全不同。

• 直接使用组件库提供的浮层自定义挂载能力
  目前主流前端组件库的popover、tooltip、下拉类浮层，基本都自带自定义挂载节点的配置项（比如Ant Design的getPopupContainer、Element Plus的popper-options）。直接把浮层的DOM节点挂载到全局body下，完全脱离表格容器的溢出影响范围，组件本身会自动计算触发元素的相对位置完成定位，不需要改动表格本身的横向滚动逻辑，是生产环境最高效的解法。
  适配提示：如果表格支持横向滚动，需要浮层跟着触发按钮实时联动的话，手动监听表格容器的滚动事件，动态修正浮层的横向定位值即可，不会出现浮层位置和触发按钮脱钩的问题。
• 调整DOM结构拆分滚动职责
  不要把横向滚动容器、表格本体、浮层元素全部塞在同一个DOM节点里，拆成三层结构实现职责分离：
  1. 最外层设置overflow-x: auto的容器，只负责承载横向滚动的交互效果，不直接包含任何浮层类元素
  2. 中间层是宽度撑开的表格本体，不设置任何溢出裁剪属性
  3. 所有浮层元素的挂载点放在和中间层表格本体同级的位置，避开最外层滚动容器的裁剪范围
     这种方案的好处是浮层不会因为挂载到全局body层出现定位错位，适合对浮层联动精度要求高的场景。
• 用自定义交互替代原生overflow滚动
  全程保持表格容器的overflow: visible不做任何裁剪，当表格内容宽度超出可视区域时，通过监听滚轮、触摸板、移动端手势事件，手动平移表格内容实现横向滚动效果。这种方案适配成本最高，只适合对浮层显示效果有极端要求的特殊业务场景。

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