overflow怎么实现上下可以滚动，左右不能滚动，但是左右绝对定位超出的内容能够显示？

Question

做项目遇到这个问题，很头疼。希望大牛们帮忙看一下
测试地址：https://jsfiddle.net/0w31yczz...

级联选择器有三级，由于外层给了y轴滚动，所以第三级被藏起来了（黑线部分）

这是想要的效果

Answer 1

span绝对定位直接定位到右侧不行吗

   .wrap{
            margin:0 auto;
            height: 300px;
            width: 120px;
            overflow-y: scroll;
            overflow-x: visible;
            border: 1px solid red;
        }
        .wrap li{
            list-style: none;
            height:80px;
            position: relative;
            border-bottom:1px solid blue;
        }
        .wrap li span{   
            position: absolute;
            right: 0px;
            top: 20px;
        }

Answer 2

overflow-x: hidden;
overflow-y: scroll;

这样不就是左右不动了吗

Answer 3

// css
.wrap{
    margin:0 auto;
    height: 300px;
    width: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid red;
}

overflow 有visible | hidden | scroll | auto | inherit这几个值
具体参考MDN overflow文档，比较详细。

Answer 4

  .wrap{
            margin:0 auto;
            height: 300px;
            width: 120px;
            overflow-y: scroll;
            overflow-x: hidden;
            border: 1px solid red;
        }
        .wrap li{
            list-style: none;
            min-height:80px;
            position: relative;
            border-bottom:1px solid blue;
        }
        .wrap li span{
            width:100%;
            text-align: right;
            top: 20px;
            display:block;
            height:auto;
        }

这样就可以了

Answer 5

overflow-x:visible;
试试