如何在fixed视口中显示超长下拉内容？解决日期选择器滚动问题

针对fixed定位的居中弹出层无法滚动高内容的问题，有两种可行方案：

方案一：弹出层内部滚动（推荐） #

限制弹出层的最大高度为视口高度的合理比例，超出部分在弹出层内部滚动，既保持居中定位，又能完整查看内容。

修改后的CSS代码：

.popupWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.3);
}
.popup {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 30px 20px;
  row-gap: 10px;
  max-height: 90vh; /* 限制最大高度为视口的90%，避免贴边 */
  overflow-y: auto; /* 内容超出时垂直滚动 */
  height: fit-content;
  background-color: $box-color;
  border-radius: 12px;
  z-index: 99;
}

方案二：整个遮罩层滚动 #

调整弹出层的垂直对齐方式，通过margin实现居中，当内容超出视口时，整个遮罩层区域可滚动。

修改后的CSS代码：

.popupWrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 改为flex-start，避免内容被截断 */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  overflow: auto; /* 保留滚动属性 */
  background-color: rgba(0, 0, 0, 0.3);
}
.popup {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 30px 20px;
  row-gap: 10px;
  height: fit-content;
  background-color: $box-color;
  border-radius: 12px;
  z-index: 99;
  margin: auto 0; /* 通过上下auto margin实现垂直居中 */
}

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