How do I scroll to an element which is present inside an overflow div which itself is inside an an overflow container?

Question

Everytime I add a new element the page should scroll to the bottom of the inner div (having id = content). Right now scrollTo scrolls to the top of the outer div aka container

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>