проблема с отображением div с абсолютной позицией с родителями на прокручиваемой боковой панели

Question

У меня возникли проблемы с отображением div с абсолютной позицией с родителями на боковой панели с возможностью прокрутки

У меня есть эта структура на боковой панели: div (раскрывающийся список) с абсолютной позицией на экране:

мой код:

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow:hidden;
}

.container{
  height:100%;
    overflow:hidden;
}
.main{
  display: flex;
}
.header{
  height: 65px;
  background: #3c8dbc;
  display: flex;
  box-shadow: 0 2px 2px rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05);
  position: relative;
  z-index: 1;
}

.content{
  height: 100%;
    width: 100%;
    background: #eee;
}
.test{
  overflow-y: auto;
    padding: 100px;
    height: 100%;
}

.scrollside{
    position: relative;
    height: calc(100% - 50px);
    overflow: auto !important;
}
.sidebar{
    max-width: 75px;
    width: 100%;
    color: #009688;
    background: #3c8dbc;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.menu-ul{
    font-family: "Ubuntu";
    font-size: 14px;
    font-weight: 300;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #fff;
        margin: 0;
    padding: 0;
    list-style: none;
}
.menu-li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    cursor: pointer;
    position: relative;
}
.menu-a{
  padding: 12px;
}
.dropdown{
  display: block;
    height: 400px !important;
    width: 400px !important;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    list-style-type: none;
    margin: 0;
    padding: 0;
    top: 0;
    left: 100%;
    font-weight: 400;
    position: absolute;
    padding: 0px;
    z-index: 1500;
    background: #307096;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

<div class="container">
<div class="header">
header
</div>
<div class="main">
<div class="sidebar">
  <div class="scrollside">
  <ul class="menu-ul">
  <li class="menu-li">
     <a class="menu-a">DropDown</a>
     <div class="dropdown">
     aaaaa
     </div>
  </li>
    <li class="menu-li">
     <a class="menu-a">DropDown 2</a>
     <div class="dropdown">
     aaaaa
     </div>
  </li>
  </ul>
  </div>
</div>
<div class"content">
<div class="test">
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
        <li>UFEHAUFAHUHAFEUFA</li>
</div>
</div>
</div>
</div>

Я знаю, что проблема в моих родительских div, но я не знаю, как ее решить, потому что мне нужно это меню боковой панели с прокруткой