Flexbox实现的结算页Overlay小视口内容被裁剪的解决方法

问题出在你用了display: flex搭配align-items: center的布局方式：当视口高度不够时，flex会强制让子元素垂直居中，超出Overlay上下边界的内容会被直接裁剪，此时overflow: auto无法触发滚动——因为flex容器的高度是固定的，但子元素的居中布局导致超出部分没有被纳入容器的滚动计算。

给你两种可行的解决办法：

办法一：用margin实现垂直居中，让Overlay处理滚动 #

去掉align-items: center，通过给子元素设置垂直方向的自动margin来实现居中，这样Overlay的overflow: auto就能正常生效，当内容超出视口时，整个Overlay区域会滚动。

修改后的代码：

body {
  overflow: hidden;
}

#overlay.active {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  background: yellow;
}

#overlay.active > div {
  margin: auto 0; /* 垂直方向自动margin实现居中 */
  height: 300px;
  background: white;
  padding: 20px;
}

<div id="overlay" class="active">
  <div>
    content
  </div>
</div>

办法二：让子元素自己处理滚动 #

保留flex的居中布局，给子元素设置max-height（减去Overlay的padding值）和overflow: auto，这样当内容超出子元素高度时，只有内容区域会滚动，Overlay背景保持固定。

修改后的代码：

body {
  overflow: hidden;
}

#overlay.active {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: yellow;
}

#overlay.active > div {
  max-height: calc(100vh - 40px); /* 减去Overlay上下各20px的padding */
  overflow: auto;
  height: 300px;
  background: white;
  padding: 20px;
}

<div id="overlay" class="active">
  <div>
    content
  </div>
</div>

两种方案按需选择：第一种适合需要整个Overlay背景随内容滚动的场景，第二种适合仅内容区域滚动、背景固定的场景。

内容的提问来源于stack exchange，提问作者clarkk