小编gra*_*ore的帖子

虽然有许多问题要求使用flexbox和垂直居中,但它们似乎都没有考虑到固定位置包装器.考虑以下:

.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当内容太小而不能导致滚动条时,这只会引发一个不足以跨越高度的新问题.

为什么我可以滚动到模态的底部,但它的顶部会被切断？