overflow:auto导致绝对定位占位置,overflow-x和overflow-y值问题

    我爱模板网要实现一个效果，侧边栏点击出现更多，更多定位，侧边栏内容很多，高度固定，必须有滚动条，结果，出现了问题，如下：


    左边slider只能y轴滚动，overflow-y:auto，横轴没有设置。右边的div，姑且称它为“more div”，是绝对定位出来的，希望能显示到slider外面，默认隐藏，点击li的三个点再出来：


    但是，我发现这样不行，如果这个“more div”的定位参考元素，即slider，设置了overflow-y:auto，就会出现横向滚动条，因为绝对定位的“more div”占了位置（按理说不应该啊），我强制将slider的overflow-x设置成visible没用，又不能设置成overflow-x：hidden，因为这样就看不见“more div”，查阅了好多资料，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’.

    翻一下就是：
    overflow-x和overflow-y的计算值跟给定的值相同，除了某些跟"visible'值的不合理组合：如果一个其中一个属性的值被赋为'visible'，而另一个被赋值为'scroll'或'auto'，那么'visible'会被重置为'auto'。overflow的计算值与overflow-x相等（如果overflow-y相同的话）；否则就是一对overflow-x和overflow-y的计算值
    其实另一个值设置为hidden的时候，visible也会被重置为auto。不应该啊！

    这个原因，是网上以为网友的解释，我觉得比较合理，摘录如下：
    咱们都知道overflow的非visible值会使一个块级元素形成一个bfc（块级格式化上下文）。overflow-x设置为visible，overflow-y设置为非visible，那究竟是触发bfc还是不触发bfc呢？此处冲突，所以充值了overflow-x，使其成为一个bfc。计算值，应该不仅仅是overflow的值，还包括一些附带属性，比如此处是否生成一个bfc。

    下面是我爱模板网写的测试：

<style>
 .father{position: relative; overflow-x:visible; overflow-y:scroll; width: 200px; height: 200px; border:1px solid red;}
 .son{position: absolute; width: 100px; height: 100px; background: orange; left:200px; top:0;}
</style>
<div class="father">
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 我爱模板网<br>
 <div class="son"></div>
</div>

    解决办法：将overflow的容器和绝对定位的容器分开。方法很多，这里就不多写了。