javascript - div のスクロールバーは、div の位置が相対的な場合にのみ機能します

Question

テキストを出力するdivを作成しようとしていますが、オーバーフロースクロールバーがあります。問題は、#display_console の位置が相対的な場合にのみスクロールすることです。そうしないと、移動元のスペースがブロックされてページのレイアウトが台無しになるため、絶対である必要があります。

Javascript から、stage.appendChild(displayConsole); を使用します。ページに追加します。

これがCSSです。もちろん他の要素もありますが、これらは問題の要素です:

#stage {
  position: relative;
  margin: 0px auto;
  margin-top:30px;
  background-color: #000;
  border: 2px solid #5c440d;
}

#display_console {
  background-color: #FFFFFF;
  position:absolute;
  right: 2%;
  left: auto;
  width: 170px;
  height: 400px;
  overflow:auto;
}

右側の div はスクロールしません。位置を相対的に変更すると、左側のボタンが下に移動し、すべて不安定になります。

これを修正する方法はありますか？