模态顶部在 flexbox 中被切断 [重复]

Posted 2023-03-05

【中文标题】模态顶部在 flexbox 中被切断 [重复]

【英文标题】：Top of modal gets cut off in flexbox [duplicate]

【发布时间】：2016-02-18 06:19:22

【问题描述】：

虽然有很多关于使用 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 没有跨越足够高度的新问题。

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

【参考方案1】：

在.modal-content flex 项目上使用margin: 0 auto，而不是margin: auto。

详情请看我的回答：https://***.com/a/33455342/3597276

【讨论】：

我希望这个答案更有意义，但我会接受。

哪一部分不清楚？

哦，这只是 flexbox 对margin: auto; 的使用。它不是特别直观，我需要在那里做一些阅读。

@graygilmore，我更新了对类似问题的回答。它提供了更多详细信息，可以帮助您更好地理解问题。 ***.com/a/33455342/3597276