Top of modal gets cut off in flexbox [duplicate]

Question

While there are many questions asking about using flexbox and vertical centering, none of them seem to take into account a fixed position wrapper. Consider the following:

.modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow: auto;
}

.modal-content {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
}

If you fill .modal-content with enough content to cause a vertical scrollbar, you will only be able to scroll down and the content in the top of the modal will be cut off.

Demo of problem: http://s.codepen.io/graygilmore/debug/3ff624cb89760c3469f286443f1c726a

This can be solved by removed the fixed attribute but that only raises a new issue of the .modal-wrapper not spanning enough of a height when the content is too small to cause a scrollbar.

Why can I scroll to the bottom of the modal and yet the top of it gets cut off?

Answer 1

Instead of margin: 0 auto on the .modal-content flex item, use margin: auto.

See my answer here for details: https://stackoverflow.com/a/33455342/3597276