position:relative な要素が overflow:auto領域にあるときスクロールバーが出る問題を解決する

#解決したい課題
あるdiv要素の上に、position:relativeな要素をオーバーレイ表示させたいとします。
（例: 地図の上にツールバーを表示させたい、など）

このとき両要素の親要素にoverflow:autoが設定されていると、見た目上は要素が範囲内におさまっているのにスクロールバーが出るという現象が起きます。

overflow:hiddenにできればいいのですが、ウィンドウを縮小されたときなどにはスクロールバーが必要になります。

overflow:autoは維持したまま、不要なスクロールバーを非表示にしたい。

<div class="container">
  <div class="text">
    This content should not have a vertical scrollbar.
  </div>
   <div class="relative"></div>
</div>

.container {
  width: 500px;
  height: 200px;
  margin: 10px;
  border: 2px solid blue;
  overflow: auto;
}

.text {
  width: 90%;
  height: 80%;
  padding: 10px;
  border: 2px solid black;
  margin: 5px;
}

.relative {
  width: 50px;
  height: 50px;
  bottom: 80px;
  left: 80px;
  position: relative;
  border: 2px solid red;
  background-color: red;
}

#解決策
以下のコードのように、position:relative要素にラッパーを用意し、ラッパーをheight:0px; width:0px;に設定すると、縦横ともに不要なスクロールバーをなくすことができます。

<div class="container">
  <div class="text">
    Relative wrapper class can avoid the scrollbar.
  </div>
  <div class="relative-wrapper">
    <div class="relative-inner"></div>   
  </div>
</div>

/* Trick! */
.relative-wrapper {
  height: 0px;
  width: 0px;
  bottom: 80px;
  left: 80px;
  position: relative;
}

 .relative-inner {
  width: 50px;
  height: 50px;
  border: 2px solid red;
  background-color: red;
}

紹介したコードは以下のCodepenで動かせますので、よろしければ覗いてみてください。
Avoid scroll bar with a relative element in overflow:auto area