position sticky и overflow в ограниченном блоке

Всем доброго времени суток! Возникла проблема..

В общем, у меня есть таблица из flex, имеет: width: 100%, height: 250px. Можно скролить в разные стороны.

Таблица достаточно длинная, поэтому пришлось сделать, чтобы ее можно было скролить по горизонтали.

С помощью position: sticky я закрепил шапку таблицы, а так же я закрепил первые 3-и колонки тоже через position: sticky. В целом, все работает отлично, как надо.

Но стоит проскроллить примерно 100% его ширины (100% ширины дисплея), как только уходит дальше - "липкие" 3-и первые колонки начинают собираться.. Как сделать так, чтобы они не собирались? Подскажите пожалуйста :)

Пример на codeopen -> https://codepen.io/mrs4z/pen/GRoQaEB

HTML:

<div class="w-basket-item-table">
                    <div class="w-basket-item-table-flex-row w-basket-item-table-flex-header">
                        <div class="w-type-flex w-type-flex-row w-type-flex-align-c w-type-flex-space-b"><div>Заголовок n</div><div><i class="fas fa-sort"></i></div></div>
                        <div class="w-type-flex w-type-flex-row w-type-flex-align-c">Заголовок n</div>
                        <div>Заголовок 1</div>
                        <div>Заголовок 2</div>
                        <div>Заголовок 3</div>
                        <div>Заголовок 4</div>
                        <div>Заголовок 5</div>
                        <div>Заголовок 6</div>
                        <div>Заголовок 7</div>
                        <div>Заголовок 8</div>
                        <div>Заголовок 9</div>
                        <div>Заголовок 10</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                        <div>Заголовок n</div>
                    </div>
                    {% for(var i = 0; i < 500; i ++) { %}
                    <div class="w-basket-item-table-flex-row w-basket-item-table-flex-item">
                        <div class="w-text-clip">NAME NAME NAME</div>
                        <div>Предмет 1</div>
                        <div>Предмет 2</div>
                        <div>Предмет 3</div>
                        <div>Предмет 4</div>
                        <div>Предмет 5</div>
                        <div>Предмет 6</div>
                        <div>Предмет 7</div>
                        <div>Предмет 8</div>
                        <div>Предмет 9</div>
                        <div>Предмет 10</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                        <div>Предмет n</div>
                    </div>
                    {% } %}
                </div>

Стили:

.w-basket-item-table {
    overflow: auto;
    position: relative;
    max-height: 360px;
    width: 100%;
}

.w-basket-item-table::-webkit-scrollbar {
    width: 1em;
}

.w-basket-item-table::-webkit-scrollbar-track {
}

.w-basket-item-table::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}

.w-basket-item-table-flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.w-basket-item-table-flex-row > div {
    flex: 0 0 150px;
    padding: 15px;
    border-right: 1px solid #ced6e0;
    border-bottom: 1px solid #ced6e0;
    background: #fff;
    font-size: 10pt;
}

.w-basket-item-table-flex-row > div:first-child {
    border-left: 1px solid #ced6e0;
}

.w-basket-item-table-flex-row div:nth-child(-n+3) {
    position: sticky !important;
    position: -webkit-sticky !important;
    z-index: 9999;
    right: 0;
}

.w-basket-item-table-flex-row div:nth-child(1) {
    left: 0;
}

.w-basket-item-table-flex-row div:nth-child(2) {
    left: 182px;
}

.w-basket-item-table-flex-row div:nth-child(3) {
    left: 363px;
}

.w-basket-item-table-flex-header {
    position: sticky;
    position: -moz-sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 99999;
}

.w-basket-item-table-flex-header > div {
    background: -moz-linear-gradient(100% 0% 90deg, #f1f2f6, #dfe4ea);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f2f6), to(#dfe4ea));
    border-top: 1px solid #ced6e0;
    font-weight: bold;
    cursor: pointer;
}

.w-basket-item-table-flex-header > div:hover {
    background: -moz-linear-gradient(100% 0% 90deg, #DCDDE1, #AEB4BA);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DCDDE1), to(#AEB4BA));
}

.w-basket-item-table-flex-item > div {
    cursor: pointer;
}

.w-basket-item-table-flex-item:hover > div {
    background: #EAEAEA !important;
}

.w-basket-item-table-flex-item:nth-child(even) > div {
    background: #fff;
}


.w-basket-item-table-flex-item:nth-child(odd) > div {
    background: #f1f2f6;
}

.w-basket-item-table-flex-menu {
    height: 45px;
    position: sticky;
    position: -moz-sticky;
    position: -webkit-sticky;
    bottom: 0;
    left: 0;
    z-index: 99999;
    background: #dfe4ea;
    width: 100%;
    border-top: 1px solid #959AA0;
    outline: none;
}