textareaのheight自動リサイズ時に、画面下部ギリギリになるのを避けたい

Question

前提・実現したいこと

JavaScriptとCSSで、入力内容の増減に応じてtextareaのheightを伸縮。
伸縮は実現できました。
textareaのheight伸縮と同時に、画面下部に余白（textarea外のmargin-bottom的な）も維持したい。

発生している問題

textareaが伸びて画面の最下部まで到達してしまった場合に、入力中文章の末尾（キャレットのとこ）が画面下部ギリギリになってしまう。
（textareaのborder-bottom部分などは画面外に見切れている）

textareaの上や下にも他のフォーム部品もありレスポンシブ的にもmax-heightのvhや％だけでは『伸びたら画面下ギリギリ』問題が回避できません。
出来れば下に2remや30pxなどの余白を持たせたいのです…

該当のソースコード

// 旧ブラウザ対応込みでconst、Promise、アローの使用を避けた。
// 自分の環境では増も減も動くが、見よう見まねのコードなので問題あれば指摘お願いします。
var t = document.getElementById('textarea01');
t.oninput = function() {
	t.style.height = 'auto';
	t.style.height = t.scrollHeight + 5 + 'px';
};

textarea { min-height:2rem; max-height:60vh; }

Comments

[yambejp]

どういう結果がご希望なのかわかりづらいです
伸びなくしたいのでしょうか？
その場合スクロールバーがでればいいのでしょうか？

[NieeeR]

分かりづらくてすみません。
説明画像を追加しました。

スクロールバーの有無（maxサイズまで到達しているか否か）に関わらず、キャレットが画面下部ギリギリになってしまうのを避けたい。…ということです。