模态顶部在 flexbox 中被截断

Question

虽然有很多关于使用 flexbox 和垂直居中的问题，但其中 none 似乎考虑了固定位置包装器。考虑以下因素：

.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);
}

如果您填充 .modal-content 的内容足以导致垂直滚动条，您将只能 向下滚动 并且模式顶部的内容将被切断。

问题演示：http://s.codepen.io/graygilmore/debug/3ff624cb89760c3469f286443f1c726a

这可以通过删除 fixed 属性来解决，但这只会引发一个新问题，即当内容太小而无法导致滚动条时，.modal-wrapper 没有跨越足够的高度。

为什么我可以滚动到模态框的底部，但顶部却被截断了？

Answer 1

而不是 .modal-content 弹性项目上的 margin: 0 auto，使用 margin: auto。

详情请看我的回答：

模态顶部在 flexbox 中被截断

Top of modal gets cut off in flexbox

html

css

flexbox