Мне удалось снять это с помощью всего лишь 3 контейнеров. Хитрость заключается в том, чтобы отделить контейнер flexbox от контейнера, который контролирует прокрутку. Наконец, поместите все в корневой контейнер, чтобы сосредоточить все это. Вот основные стили для создания эффекта:
CSS:
.root {
display: flex;
justify-content: center;
align-items: center;
}
.scroll-container {
margin: auto;
max-height: 100%;
overflow: auto;
}
.flex-container {
display: flex;
flex-direction: column;
justify-content: center;
}
HTML:
Lorem ipsum dolor sit amet.
Здесь я создал демо: https://jsfiddle.net/r5jxtgba/14/