Break the overflow of nanoscroller and overlap a div

Question

I searched for an example how to make the body of a table scrollable by using nanoScroller. The only solution was made with divs and works fine.

Now I want to add a menu inside this cells which should overlap the body of the table corners like this: wanted result

But at the moment it looks like 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 am I doing wrong?