4

I've finally gotten around to trying flexbox for my new design, since it could finally solve the age old question, how do you vertically center a bunch of text on the screen... only to find, it's not as easy as I thought.

If the content is higher than the container, then the top part of the content will actually be hidden and not be accessible by scrolling. The behaviour is the same for both Chrome and Firefox. I created a Codepen demo reproducing the issue: http://codepen.io/perrin4869/pen/LGKOwy

The demo contains 3 different methods for vertically centering content. Both the transform: translateX(-50%) and display: flex methods behave exactly the same, the table method works almost how I'd expect it to work, with the disadvantages that come from actually using display: table.

Edit: The question is, is there a way to have the overflow of a flexbox behave like the overflow in the display: table example?

Julian Grinblat
  • 161
  • 1
  • 12
  • please explain the down vote to help improve the question, I think the poster exerted much effort on constructing this – Louie Almeda Feb 22 '16 at 05:41

1 Answers1

6

The solution I found is to give the .content element inside .container.flex a max-height: 100%. This solves the clipping problem and keeps the content centered.

Please take a look at the new version: http://codepen.io/wilman/pen/NxZzqN

You will notice the text overflows the green box in the small version, but maybe you could treat that as a separate, not so difficult problem. :)

EDIT: As other sources have suggested adding margin: auto 0; to the content element also solves the scrolling problem.

Wazaraki
  • 494
  • 2
  • 7
  • Awesome solution! Bonus points if you can explain why that works too :P – Julian Grinblat Feb 22 '16 at 14:52
  • `max-height: 100%` limits the content element to not grow larger than its parent while letting the text to overflow, thus generating the scroll. Also see the update in my answer for another method. Cheers! – Wazaraki Feb 22 '16 at 15:23