Top of modal gets cut off in flexbox

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?

score 4 · Accepted Answer · edited May 23 '17 at 12:32

4

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

edited May 23 '17 at 12:32

Community

1
1

answered Nov 17 '15 at 01:16

Michael Benjamin

346,931
104
581
701

1

I wish that answer made more sense but I'll take it. – graygilmore Nov 17 '15 at 03:13
1

Which part is unclear? – Michael Benjamin Nov 17 '15 at 03:14
1

Oh just flexbox's usage of `margin: auto;`. It's not particularly intuitive and I'll need to do a little bit of reading there. – graygilmore Nov 17 '15 at 04:23
1

@graygilmore, I updated my answer to a similar question. It provides more details and may help you better understand the issue. http://stackoverflow.com/a/33455342/3597276 – Michael Benjamin Mar 12 '16 at 23:08

Top of modal gets cut off in flexbox

1 Answers1