Динамически сгенерированные кнопки в скролле

У меня есть функция для генерации кнопок.

         <script type="text/javascript">
            function createButtonsInScroll(quantityBtns, whereToInsertNode) {
              for (let i = 0; i <= quantityBtns; i++) {
                const buttonNode = document.createElement('button');
                buttonNode.id = `selectbutton${i}`;
                buttonNode.textContent = i;
                whereToInsertNode.append(buttonNode);
                const brNode = document.createElement('br');
                whereToInsertNode.append(brNode);
              }
            }
        </script>

В самом коде:

<div align="left" class="selectbutton">
        <script type="text/javascript">
            createButtonsInScroll(30, document.body);
        </script>
    </div>

У div есть свои параметры css:

.selectbutton{
    scrollbar-width: none;
    overflow: auto; 
}

Мне надо, чтобы кнопки были в данном div, а не следовали за ним.