Вертикальное выравнивание

[Crystal-3]

Здравствуйте.
Сейчас вроде бы не должно возникать проблем с вертикальным выравниванием, есть flex'ы, приём с transform: translateY(-50%). Но если контента много, то он обрезается и не спасает добавление вертикального скролла.
Пример на флексах (уменьшайте окно, пока текст не начнёт вываливаться) https://jsfiddle.net/6xjg7Lvh/
Точно такая же картинка на transform https://jsfiddle.net/sw2phpdc/
И снова приходиться возвращаться к старым добрым display: table-cell, здесь всё работает корректно https://jsfiddle.net/39xo2gzo/
Ребят, можно это как-нибудь пофиксить или в таких случаях использовать только display: table-cell ?

[vladmih]

6 минут назад, Crystal-3 сказал:

Здравствуйте.
Сейчас вроде бы не должно возникать проблем с вертикальным выравниванием, есть flex'ы, приём с transform: translateY(-50%). Но если контента много, то он обрезается и не спасает добавление вертикального скролла.
Пример на флексах (уменьшайте окно, пока текст не начнёт вываливаться) https://jsfiddle.net/6xjg7Lvh/
Точно такая же картинка на transform https://jsfiddle.net/sw2phpdc/
И снова приходиться возвращаться к старым добрым display: table-cell, здесь всё работает корректно https://jsfiddle.net/39xo2gzo/
Ребят, можно это как-нибудь пофиксить или в таких случаях использовать только display: table-cell ?

Я все равно не понял проблемы, у меня с флексом вообще проблем нет... Ведет себя отлично и логично...

[Switch74]

без таблиц можно так
https://jsfiddle.net/6xjg7Lvh/1/

[Crystal-3]

Switch74, да, точно, спасибо)  про этот способ забыла) 

А флексы и трансформ никак не заставить не обрезать верх?

Почему именно сейчас назрел вопрос: мне часто приходиться сталкиваться с чужим кодом, например, как сейчас - нужно адаптировать сайт и много блоков в коде центрируются transform'ом. Придёться переверстать? Пофиксить никак?

vladmih, я про вот это: http://prntscr.com/i73opb . Текст обрезается сверху и снизу. И если к низу ещё можно доскролить, то вверх уже никак не достучаться.

Edited January 29, 2018 by Crystal-3