jquery - Break the overflow of nanoscroller and overlap a div -

i searched example how make body of table scrollable using nanoscroller. solution made divs , works fine.

now want add menu inside cells should overlap body of table corners this: wanted result

but @ moment looks this:

$('.nano').nanoscroller();

* {    box-sizing: border-box;  }    body {    background: #111;    margin: 0;    font-family: sans-serif;    font-size: 120%;  }    .wrapper {    margin: auto;    max-width: 400px;    width: 80%;    min-height: 100vh;    display: flex;    justify-content: center;    align-items: center;  }    .c-table {    display: flex;    flex-direction: column;    width: 100%;    background: #fff;    border-radius: 5px;    overflow: hidden;    height: 220px !important;  }    .c-table__header {    display: block;    width: 100%;  }    .c-table__row {    display: table;    width: 100%;  }    .c-table__cell {    display: table-cell;    padding: 10px;    text-align: left;  }    .c-table__cell--th {    background: hsl(200, 40%, 60%);    color: #333;  }    .c-table__cell:first-child {    width: 40%;    }    .c-table__cell:nth-child(n+2) {    width: 30%;      text-align: right;  }    .c-table__body {    overflow-y: auto;  }    #mydiv {    position: relative;  }  #mydiv > div {    position: absolute;    height: 100px;    background: yellow;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/css/nanoscroller.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/javascripts/jquery.nanoscroller.min.js"></script>  <div class="wrapper">    <div class="c-table">      <div class="c-table__header">        <div class="c-table__row c-table__row--header">          <div class="c-table__cell c-table__cell--th">type</div>          <div class="c-table__cell c-table__cell--th">2014</div>          <div class="c-table__cell c-table__cell--th">2015</div>        </div>      </div>      <div class="nano has-scrollbar">        <div class="nano-content" tabindex="0" style="right: -17px;">          <div class="c-table__body">            <div class="c-table__row">              <div class="c-table__cell">apples</div>              <div class="c-table__cell">15</div>              <div class="c-table__cell">12</div>            </div>            <div class="c-table__row">              <div class="c-table__cell">oranges</div>              <div class="c-table__cell">15</div>              <div class="c-table__cell">12</div>            </div>            <div class="c-table__row">              <div class="c-table__cell">lettuce</div>              <div class="c-table__cell">18</div>              <div class="c-table__cell">12</div>            </div>            <div class="c-table__row">              <div class="c-table__cell">plums</div>              <div class="c-table__cell">13</div>              <div class="c-table__cell">18</div>            </div>            <div class="c-table__row">              <div class="c-table__cell">cherries</div>              <div class="c-table__cell">12</div>              <div class="c-table__cell">15</div>            </div>            <div class="c-table__row">              <div class="c-table__cell">lemons</div>              <div class="c-table__cell">12</div>              <div class="c-table__cell">                <div id="mydiv">                  <div>hello</div>                </div>              </div>            </div>          </div>        </div>      </div>    </div>

what doing wrong?