overflow-x和overflow-y的踩坑记录

今天在用iview的tab组件时遇到一个问题，tab内部的元素hover时出现浮层内容，该内容超出了tab。超出部分被隐藏了，这是因为Tab组件设置了overflow:hidden。

起初我这样设置了：

.ivu-tabs {
  overflow:visible !important;
}

果然显示出来了，但是在移动端时出现了问题，tab横向超出了，使之出现了横向滚动条。这不是我要的效果。我要的是横向隐藏，纵向显示。那么这样可不可以呢？

.ivu-tabs {
  overflow-x:hidden !important;
  overflow-y:visible !important;
}

结果是visible没起作用。why? 立马去搜索了资料，得到这样的解释

In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.

W3C是这么解释的：

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

也就是说这里的visible被解释为auto了。

overflow行不通了，这里是我最后采用的方法：

.ivu-tabs {
  padding-bottom: 250px;
  margin-bottom: -250px;
}

参考：CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue