Сделайте абсолютную центрированную прокрутку div, не обрезая первые элементы

Question

У меня есть список, где элементы могут быть добавлены или удалены. Список должен быть центрирован по вертикали и горизонтали относительно его контейнера. Для этого я использовал следующий стиль:

transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;

Когда элементы добавляются в список, пользователь должен иметь возможность прокручивать вверх и вниз, чтобы просмотреть все элементы. Но с тем, что у меня есть, пользователь может прокручивать, но верхняя часть списка обрезается. Я полагаю, что это из-за преобразования и лучших 50%, которые я использовал.

Как мне получить список div по центру по горизонтали и вертикали И прокручивать без проблем при переполнении списка?

Это моя скрипка с тем, что у меня есть.

Я использую Angular 4.

Answer 1

Попробуйте сделать прокрутку дочерней оболочки с фиксированной высотой примерно такой:

.list{ max-height: 100%; overflow-y: scroll; }

Answer 2

вы можете установить max-height на list и установить overflow-y на auto, чтобы при увеличении количества элементов списка вы получали внутри него прокрутку.

.list {
    border: 1px solid red;
    width: 200px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    position: absolute;
    max-height: 100%; // Added
    overflow-y: auto;  // Added
}