JSFiddle - React, Tailwind, and code Playground

by djwave28

HTML

<!-- when inner gets bigger than outer: -->

<div id="mobile2" class="mobile2">
  <div   class="bottom2">
  </div>
</div>

CSS

.mobile1{
  height:400px;
  width: 300px;
  background-color: red;
  position: relative
}

.bottom1{
  height:100px;
  width: 300px;
  position: absolute;
  bottom: 0;
  background-color: blue;
}

/* when inner gets bigger than outer: */

#mobile2,.mobile2{
  height:300px;
  width: 300px;
  background-color: red;
  position: absolute;
  bottom:0;
  overflow-y: scroll;
  overflow-x: hidden;
}

.bottom2{
  height:500px;
  width: 300px;
  position: relative;
  bottom: 0;
  background-color: blue;
}

JavaScript

var objDiv = document.getElementById("mobile2");
objDiv.scrollTop = objDiv.scrollHeight ;