overflow-y: scroll, y 轴设置滚动条，影响 position: absolute; 的效果

需求：左右两栏，左右两栏有各自的滚动条， y 轴超过某个长度，出现滚动条；点击红色区域的按钮，在红色区域的右侧出现蓝色弹框；

代码（点击按钮事件暂不实现）

<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
<style>
	.flex-cont {
        display: flex;
        justify-content: space-between;
    }
    .flex-l, .flex-r {
        flex: 1;
        min-width: 100px;
        border: 1px solid black;
        max-height: 500px;
        overflow-y: scroll;
    }
    .flex-r {
        margin-left: 20px;
    }
    .cont {
        height: 1000px;
        border: 1px solid red;
        position: relative;
    }
    .modal {
        position: absolute;
        width: 100px;
        height: 100px;
        border: 1px solid rgb(28, 41, 233);
        top: 1px;
        left: 100%;
    }
    .inner {
        
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

    .cont-r {
        height: 1000px;
    }
   
    
</style>
</head>
<body>

    <div class="flex-cont">
        <div class="flex-l">
            <h3>23</h3>
            <p>qwertyuio</p>
            <h3>23</h3>
            <p>qwertyuio</p>
            <h3>23</h3>
            <p>qwertyuio</p>
            
            <h3 class="cont">
                <button>click</button>
                <div class="modal">
                    <div class="inner"></div>
                </div>
            </h3>
        </div>
        <div class="flex-r">
            <div class="cont-r">
                
            </div>
        </div>
    </div>



	
</body>
</html>

效果：只实现了 y 轴的滚动条， x 轴也出现了滚动条，并且，滑动 x 轴滚动条才能看到蓝色弹框

理解原来为什么不能实现。篮筐的层级浮在上面，篮筐层级也就会高于左侧黑框，黑框又想有滚动条，滚动条的区域的子dom 层级一定会在滚动条下面，也就是说不能高于左侧黑色区域。

方案： 1、篮筐设置成fixed ，然后监听 y 轴滚动事件，动态设置篮筐的位置； 2、点击按钮的时候取消左侧黑框的滚动的样式；关闭蓝色弹框恢复左侧黑框的滚动样式；