Trung tâm sắp xếp chứa flexbox trừ khi nội dung tràn viewport

Question

Để theo chiều dọc và chiều ngang tập trung một div với flexbox tôi chỉ đơn giản áp dụng những quy tắc để nó mẹ

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

Vì vậy mà nó sẽ được hiển thị như sau:

Tuy nhiên khi có nhiều nội dung trong div thì có chiều cao trong chế độ xem, nó làm cho nội dung tràn trang web để trang không hiển thị và không thể cuộn lên như sau: jsfiddle.net/xk1z6wpa/2

Tôi cần div để không tràn trang web từ trên xuống, chứ không phải dừng lại trước khi đến nó như vậy chỉ tràn từ đáy như vậy:

Làm thế nào tôi có thể hoàn thành điều này?

Answer 1

Tôi nghĩ rằng lựa chọn duy nhất của bạn là để throw a little JS trong.

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

này đẩy nội dung vào top of the page trừ khi nó sẽ cho kết quả trong một biên độ tiêu cực, lúc này các biểu thức ước lượng 0.