Center align flexbox container unless content overflows viewport

Question

To vertically and horizontally center a div with flexbox I simply apply these rules to it's parent

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

So that it will be displayed like so:

However when there's more content in the div then there is height in the viewport, it makes the content overflow the webpage so it isn't visible, and impossible to scroll up- like so: jsfiddle.net/xk1z6wpa/2

I need the div to not overflow the webpage from the top, rather stopped before reaching it thus only overflowing from the bottom- like so:

How can I accomplish this?

Can you share a code example? But it works fine: http://jsfiddle.net/xk1z6wpa/1/ — m4n0, Dec 13 '15 at 05:18
@ManojKumar updated your example http://jsfiddle.net/xk1z6wpa/2/ — uneducatedguy, Dec 13 '15 at 05:31
Is flexbox necessary? It seems to me that this would best be accomplished via other means. — Jack Guy, Dec 13 '15 at 06:29
@Harangue vertically centering dynamic content without flexbox is a huge pain. Would be preferred to use flexbox if possible. — uneducatedguy, Dec 13 '15 at 06:31
@uneducatedguy It's actually pretty straightforward. `top: 50%; transform: translateY(-50%);` — Jack Guy, Dec 13 '15 at 06:31
@Harangue, that will not work, and cause the same problem as documented in my images. — uneducatedguy, Dec 13 '15 at 06:35
I'm not saying it'll work, I'm just wondering if you're tied to flexbox or not. Because beyond the properties you've used, flexbox doesn't actually do much else. — Jack Guy, Dec 13 '15 at 06:37
[This answer worked for me,](http://stackoverflow.com/a/33455342/937377) and still uses Flexbox. — Nathan Arthur, Mar 09 '16 at 02:27

score -1 · Answer 1 · answered Dec 13 '15 at 06:46

I think your only option is to throw a little JS in.

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

This pushes the content to the top of the page unless it would result in a negative margin, at which point the expression evaluates to 0.

Center align flexbox container unless content overflows viewport

1 Answers1