Centro allineare contenitore FlexBox a meno che il contenuto trabocca viewport

Question

Per verticale e centrare orizzontalmente un div con FlexBox ho semplicemente applicare queste regole al suo genitore

display: flex; 
align-items: center; 
justify-content: center; 

In modo che esso sarà visualizzato in questo modo:

Tuttavia, quando c'è più contenuto nel div, c'è dell'altezza nel viewport, rende il contenuto inondare la pagina Web in modo che non sia visibile e impossibile scorrere in alto così: jsfiddle.net/xk1z6wpa/2

Ho bisogno il div di non traboccare la pagina web dalla parte superiore, invece fermato prima di raggiungerla quindi solo traboccante dal basso verso questo modo:

Come posso realizzare Questo?

Answer 1

penso che l'unica opzione è quella di throw a little JS in.

$(".content").css({ 
    'margin-top': Math.max($(".content").height() - $(window).height(), 0) 
}) 

Questo spinge il contenuto alla parte superiore della pagina a meno che non si tradurrebbe in un margine negativo, a quel punto l'espressione restituisce 0.