JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<div class="app">
  <div class="app__main">
    <ul>
      <li>001</li>
      <li>002</li>
      <li>003</li>
      <li>004</li>
      <li>005</li>
      <li>006</li>
      <li>007</li>
      <li>008</li>
      <li>009</li>
      <li>010</li>
      <li>011</li>
      <li>012</li>
      <li>013</li>
      <li>014</li>
      <li>015</li>
      <li>016</li>
      <li>017</li>
      <li>018</li>
      <li>019</li>
      <li>020</li>
      <li>021</li>
      <li>022</li>
      <li>023</li>
      <li>024</li>
      <li>025</li>
      <li>026</li>
      <li>027</li>
      <li>028</li>
      <li>029</li>
      <li>030</li>
    </ul>
  </div>
  <div class="app__footer">
    <textarea rows="1"></textarea>
  </div>
</div>

CSS

.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app__main {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.app__footer {
  flex: 0 0 auto;
  padding: 10px;
  background: #eee;
}

textarea {
  display: block;
  box-sizing: border-box;
  overflow: auto;
  overflow-x: hidden;
  padding: 0;
  width: 100%;
  height: auto;
  max-height: 160px;
  font-size: 16px;
  line-height: 20px;
  resize: none;
}

ul {
  margin: 0 40px;
  padding: 0;
}

li {
  padding: 20px;
  border: 1px solid #ccc;
}

JavaScript

var appMain = document.querySelector('.app__main');
var appFooter = document.querySelector('.app__footer');
var input = document.querySelector('textarea');

autosize(input);
input.addEventListener('autosize:resized', onResizeTextarea);

let inputHeight = input.offsetHeight;

function onResizeTextarea(e) {
  console.log('textarea height resized');
  let rows = +input.getAttribute('rows');
  let diff = input.offsetHeight - inputHeight;
  inputHeight = input.offsetHeight;

  appMain.scrollTop += diff;
  if (diff > 0) {
    input.setAttribute('rows', rows + 1);
  }
}