переполнение: прокрутка маскируется под div

Question

Мне нужно создать сайт электронной коммерции, и я достиг той части, когда мне нужно загрузить продукты на странице.Как видите, это не происходит должным образом.Я пробовал со свойством overflow, но оно не сработало.Первый ряд продуктов находится «под» родителем div.

Это то, что происходит без переполнения

Это то же самое, что и с переполнением: scroll;'

<div id="rightPanel">
    {% for row in queryResult %}
    <script>
    var productPhone = document.createElement('div');
    var rightPanel = document.getElementById("rightPanel");

    var name = document.createElement('div');
    var photo = document.createElement('div');
    var price = document.createElement('div');
    var button = document.createElement('div');

    productPhone.setAttribute("class","productPhone");
    name.setAttribute("class","namePhone");
    name.innerHTML = "Telefon {{row.brand}} {{ row.product_name }}";
    photo.setAttribute("class","photoPhone");
    price.setAttribute("class","pricePhone");
    price.innerHTML = "{{ row.price }}";
    button.setAttribute("class","buttonPhone");
    button.innerHTML = "<a href='{{ PHPpath }}/productTemplate.php?id={{ row.id }}'> 
    <i class='fas fa-angle-double-right'></i>Details</a>";

    productPhone.appendChild(photo);
    productPhone.appendChild(name);
    productPhone.appendChild(price);
    productPhone.appendChild(button);
    rightPanel.appendChild(productPhone);
    </script>
    {% endfor %}
    </div>

И это соответствующий код CSS:

    #rightPanel
    {
        width: 70%;
        height: 1000px;
        border: 1px solid black;

        position: absolute;
        top: 200px;
        left: 27%;

        overflow: scroll;
        clear: both;
        white-space: nowrap;

        margin-bottom: 20px;

        display:flex!important;
        justify-content: flex-start!important;
        align-items: flex-start!important;
        align-content: center!important;
        flex-flow: row wrap!important;

    }

.productPhone
{
    border: 1px solid red;

    width: 200px;
    height: 280px;

    margin-left: 30px;
    margin-top: 30px;

    position: relative;

    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    flex-direction: column;

}

Я действительно не понимаю, почему он так себя ведет ...