Список, появляющийся в прокрутке, обрезается ⇐ CSS

[Anonymous]

Я создаю список с абсолютным положением некоторых кнопок. Этот список находится за элементом div выше, поэтому список обрезается. Я уже пытался индексировать список и элемент div, который находится впереди, но это не сработало.
Ссылка с примером:
https://codepen.io /pedrocardogiiromaps/pen/YzMojoe

Код: Выделить всё

const priorities = document.getElementsByClassName('priority-button');

const arrayPriorities = Array.from(priorities);

arrayPriorities.forEach(function(element) {
element.addEventListener('click', function(event) {
const nextElement = element.nextElementSibling;
if (nextElement.classList.contains('hidden')) {
nextElement.classList.remove('hidden');
} else {
nextElement.classList.add('hidden');
}

const position = getPositionRelativeToPage(nextElement);
const windowHeight = window.innerHeight || document.documentElement.clientHeight;

//if (position > windowHeight * 0.5) {
nextElement.style.bottom = `${windowHeight - windowHeight * 0.95}px`;
//}
});
});

function getPositionRelativeToPage(element) {
const rect = element.getBoundingClientRect();
const scrollTop = window.scrollY;
return rect.top + scrollTop;
}

Код: Выделить всё

.lanes {
display: flex;
align-items: flex-start;
justify-content: start;
gap: 16px;
padding: 24px 32px;
overflow: scroll;
height: 100%;
}

.container-prioridades {
position: relative;
}

.prioridades {
position: absolute;
display: flex;
flex-direction: column;
}

Код: Выделить всё

TODO


Get groceries

prioridades

1
1
1




Feed the dogs

priorities

1
1
1




Mow the lawn


prioridades

1
1
1

Я пробовал использовать z-index, изоляцию, исправление, но ничего не помогло.< /п>

Подробнее здесь: https://stackoverflow.com/questions/784 ... ng-cut-off