JSFiddle - React, Tailwind, and code Playground

HTML

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->
<script>
var container = document.querySelector('#b');
var elems = [].slice.call(document.querySelectorAll('.x'));
container.innerHTML = "";
elems.reverse().forEach(function(elem, index){
	container.appendChild(elem);
});
container.scrollTop = container.scrollHeight;
//scroll to bottom of #b div
var body = document.body,
html = document.documentElement;
var docheight = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );
//get height of document cross-browser
window.scrollTo(0, docheight);
//scroll to bottom of document
</script>

CSS

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}