JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<div class="battle-plan-plash">
  <div class="battle-plan-plash-holder scroll-js" id="scrollable">
  </div>
</div>

CSS

.battle-plan-plash-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  max-width: 330px;
  padding: 0 15px;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(0, 0, 0, .3);
}

.battle-plan-plash-step {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 5px;
}

JavaScript

function bottomScroll(selector) {
var objDiv = document.getElementById('scrollable');
objDiv.scrollTop = objDiv.scrollHeight;
  console.log('Высота прокручиваемого блока: ' + $(selector).height());
}

$('.scroll-js').niceScroll({
  cursorcolor: "#424242", // change cursor color in hex
  cursoropacitymin: .3, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
  cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
  cursorwidth: "5px", // cursor width in pixel (you can also write "5px")
  cursorborder: "1px solid #5c5a6b", // css definition for cursor border
  cursorborderradius: "5px", // border radius in pixel for cursor
  scrollspeed: 40, // scrolling speed
  mousescrollstep: 30, // scrolling speed with mouse wheel (pixel)   
  //background: "#353542", // change css for rail background
  cursorminheight: 32, // set the minimum cursor height (pixel)
  autohidemode: "leave",
});

setInterval(function() {
  $('.battle-plan-plash-holder').append('<div class="battle-plan-plash-step">hello</div>');
  bottomScroll('battle-plan-plash-holder');
}, 500)