JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mobile1">
  <div class="bottom1">
  </div>
</div>

<br><br>

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

<div 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{
  height:400px;
  width: 300px;
  background-color: red;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
}

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