css滚动定位,css3滚动条定位问题！~

这个样式是我加上滚动条了！

这个是我没有加滚动条，旁边有一个浮动的红色框框，我如果加了滚动条overflow-x overflow-y之后呢。它就把红色的框框隐藏了

这个是项目结构

CSS样式

.container {

position: absolute;

top: 50px;

left: 0;

right: 0;

bottom: 0;

width: 100%;

height: auto;

display: -ms-flexbox;

display: flex;

overflow: hidden;

}

.mini-left-sidebar {

width: 40px;

overflow: visible;

}

.mini-menu {

cursor: pointer;

height: 100%;

/* overflow-y: auto; */

/* overflow-x: hidden; */

}

.menu-ul {

width: 100%;

height: auto;

background: #37424f;

text-align: center;

}

.menu-ul .menu-li {

padding: 12px 0;

position: relative;

}

.menu-ul .menu-li .sub-menu {

width: 200px;

height: 100px;

border: 1px solid red;

position: absolute;

left: 50px;

top: 0;

z-index: 999;

}

想问下如何解决这个问题呢！！！