当overflow遇到了position:absolute

Question

原本是想做一个三级菜单效果,主菜单显示一级和二级菜单,三级菜单相对于二级菜单定位到右侧去显示,主菜单总是固定在左侧且永远100%高,y轴上超出自行滚动,所以加上了overflow-y:auto;原本预想的是给二级菜单加上relative,然后给三级菜单加上absolute就可以让三级菜单脱离出去文档流达到效果,但是却发现在主菜单上却出现了横向滚动条
html结构:

<ul class="side">
    <li>
        <div class="menu-1">职业管道师</div>
        <ul class="menu-2">
            <li>狼巴子原型机</li>
            <li>薛定谔二式</li>
            <li>
                库巴是女王
                <ul class="menu-3">
                    <li>马里奥救驾</li>
                    <li>夭寿啦</li>
                    <li>套猴保护者协会</li>
                </ul>
            </li>
            <li>碧琪没良心</li>
        </ul>
    </li>
</ul>

css:

.side{
    width:200px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color:#393C4D;
    color:white;
    text-align: center;
    overflow-y:auto;
    display: none;
}
.menu-2 li{
    position: relative;

}
.menu-3{
    position: absolute;
    width:200px;
    left: 200px;
    background-color:#393C4D;
    color:white;
    top: 0;
    box-sizing: border-box;
}

Answer 1

解决方案，不要把宽高写死就行。不要使用overflow