防止内容在 flexbox 模态中溢出超出滚动范围

Posted 2023-03-05

【中文标题】防止内容在 flexbox 模态中溢出超出滚动范围

【英文标题】：Preventing content from overflowing beyond scroll in a flexbox modal

【发布时间】：2020-01-08 14:51:16

【问题描述】：

我使用 flexbox 创建了一个模态框，它适用于小型模态框。我遇到的问题是，如果模态的内容高度太高，它将裁剪模态并且您无法滚动到它的顶部或底部。下面是一个 JS Fiddle 来说明这一点，要点是：

模态容器是固定的位置，可以弯曲并居中我有对齐项目的内容：中心，对齐内容中心。 overflow-y 设置为滚动。 我已将模态内容设置为 2000 像素的高度，以说明您无法滚动到文本。

.modal-container
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000aa;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;


.modal
  background-color: white;
  width: 200px;


.modal-content
  height: 2000px;

https://jsfiddle.net/evrw81o3/

如何让内容显示在滚动边界内？

【参考方案1】：

您需要将margin: auto 添加到您的.modal 类中。见https://jsfiddle.net/89ja04v6/

.modal
  background-color: white;
  width: 200px;
  margin: auto 0;

文本未显示的原因是模式的内容与屏幕顶部重叠，而不是从顶部开始（因为自然会出现非伸缩项）。你可以在这里阅读更多关于flex和margin: auto的信息：https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6