Как создать горизонтальную прокрутку в нижней части таблицы с помощью javascript?

   <section id="section">
        <div>
        <p></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>
        <p class='name'></p>

        </div>
        <div>
        <div class="average">Average</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        <div class ="average">3.0</div>
        </div>

        section {
        display: flex;
       flex-direction: row;
        width: 100%;
         }

Это мой html-файл с css под ним. Я создаю динамическую таблицу для студенческих меток с javascript каждый раз, когда я нажимаю кнопку добавления, создается новый div с другими 15 divs, вложенными в него, и новый столбец добавляется в таблицу. Теперь, что я хочу сделать, так это то, что после добавления let скажем, что 6 столбцов в моей таблице делают горизонтальную полосу прокрутки ниже моего div раздела, так что дополнительные столбцы больше не занимают места на странице. Как это можно сделать с помощью javascript?