While there are many issues associated with using flexbox and vertical centering, none of them seem to take into account the fixed positional 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 enough content to trigger a vertical scrollbar, you can scroll down and the content at the top of the modal file will be disabled.
Demonstration of the problem: http://s.codepen.io/graygilmore/debug/3ff624cb89760c3469f286443f1c726a
This can be resolved by removing the fixed attribute, but this only causes a new problem with .modal-wrapper , not covering enough height when the content is too small to cause a scrollbar.
Why can I scroll the bottom of a modal object, but the top of it is cropped?
source share