如何滚动到溢出div内部的元素，溢出div本身位于溢出容器内？

Question

每次我添加一个新元素时，页面应滚动到内部div的底部（具有id = content）。现在scrollTo滚动到外部div又名容器

的顶部

https://jsfiddle.net/fLd7mxpq/

// css
    .container{
      background: #eee;
      height: 800px;
    }
    .inner-div{
      overflow-y: auto;
      height: 100px;
      background: #aaa;
    }
<script>
function addItem() {
    document.getElementById('content').innerHTML += "<p>Some new Data</p>";
  window.scrollTo(0,0);
}
</script>
<div class="container">
  <div class="inner-div" id="content">
  <p>
  Some random data
  </p>
  <p>
  Some random data
  </p>
  <p>
  Some random data
  </p>
  <p>
  Some random data
  </p>
  <p>
  Some random data
  </p>
  </div>
  <div>
  <p>
  Some random data
  </p>
  <p>
  Some random data
  </p>
  <button onclick="addItem()">
  Add Item
  </button>
  </div>
</div>