Materialize CSS Stop Textarea Content Overflow From Increasing Page Height

Consider this code:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <meta charset="UTF-8" />
    <main class="container" id="main" style="max-width: 90%">
      <div class="row" style="overflow: hidden">
        <div class="col s12 m5 l5 xl5">
          <form class="grey lighten-3">
            <div class="input-field">
              <textarea
                id="textarea1"
                class="materialize-textarea"
                rows="18"
                style="overflow-y: scroll; height: 20rem !important; max-height: 20rem"
              ></textarea>
              <label for="textarea1">Input 1</label>
            </div>
          </form>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m5 l5 xl5">
          <form class="grey lighten-3">
            <div class="input-field">
              <textarea
                id="textarea2"
                class="materialize-textarea"
                rows="18"
                style="overflow-y: scroll; height: 20rem !important; max-height: 20rem"
              ></textarea>
              <label for="textarea2">Input 2</label>
            </div>
          </form>
        </div>
      </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

Maybe it's not possible, but I have been trying to figure out how to put a lot of content in either of the textareas without increasing the height of the main body. If I put say 100 lines of content in "textarea2" this will create a large scrollable area of white space at the bottom of the page. I want to try and avoid this.

The tricky thing is that I do not want to disable scrolling on the main page. For instance if the bottom of the browser is moved up to cover half of "textarea2" then the main page will trigger a scrollbar so that it's possible to scroll down to see all of "textarea2" element. I do not want to disable that feature, just want to stop the textareas from creating stacks of unsightly whitespace.

EDIT: I should add that I am going to be using this with Electron, so doesn't need to work with other browsers.