textareaが自動的に縦に伸び縮みするJavascript

 　textareaに入力した文字が増えた時に自動的に縦に伸びるコードはcssだけでは実現できないらしく、Javascriptが必要らしい。その為のコードをGeminiに教わったのだけど、外側にdivの枠があると、そのdivの高さを超えた場合にtextareaのスクロールバーだけでなく、その外側にdivのスクロールバーが現れて、見た目が悪いだけでなく使いにくくなる。そこで、Javascriptでtextareaが overflow:hidden; になるようにする。cssで overflow:hidden;にすると、Javascriptが無効な場合にスクロールバーが現れなくなるのでダメだそうだ。

　実験用のコードは次の通り。

<div style="width:300px; height:100%; overflow:auto; border:1px solid;">
<textarea id="autoResizeTextarea" style="resize:none; width:100%; min-height:100px; overflow:auto;">
１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０
</textarea>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const textarea = document.getElementById('autoResizeTextarea');
    const minHeight = 100; // CSSのmin-heightと合わせる
    textarea.style.overflow = 'hidden'; // textareaにスクロールバーが表示されないようにする

    function adjustHeight() {
        // textareaの文字が減った場合にサイズを縮める
        textarea.style.height = 'auto';

        // scrollHeight (要素の内容全体を表示するのに必要な最小の高さ) を取得
        // そして、その値と最小高さ（minHeight）を比較して、より大きい方を新しい高さとして設定
        textarea.style.height = Math.max(minHeight, textarea.scrollHeight) + 'px';
    }

    // 初期表示時に一度高さを調整
    adjustHeight(); 

    // 入力があるたびに高さを調整
    textarea.addEventListener('input', adjustHeight); 
});
</script>