如何用CSS实现贴靠视口右边缘的多列自动堆叠通知容器

现有实现的溢出问题完全来自#container的CSS配置缺陷：

• 对fixed定位的容器仅设置了bottom:0、right:30px和max-height:100vh，没有设置left和top边界约束，容器宽度会被内部通知内容无限向左撑开，直接超出视口左边界。
• 无宽度约束的flex容器上配置的align-content: flex-end不会生效，无法保证最新通知列始终贴靠右侧设定的30px缩进位置。
• 占满纵向空间的容器没有做指针事件穿透处理，后续列数增多后会挡住页面其他元素的正常交互。

仅需调整CSS部分即可，原有JS交互逻辑无需修改：

1. 替换原有#container样式为以下代码：

#container {
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
  align-content: flex-end;
  align-items: flex-end;
  bottom: 0;
  right: 30px;
  top: 0;
  left: 0;
  max-height: 100vh;
  pointer-events: none;
}

2. 在.notification样式中新增一行配置，恢复通知本身的交互能力，其余原有样式保留即可：

.notification {
  pointer-events: auto;
  /* 保留原有其余样式 */
  transition: all 500ms ease-in-out;
  box-shadow: 0 0 1rem #0004;
  margin: 0 1rem 1rem 0;
  background: #f9f99f;
  color: #000;
  border: 1px solid #0008;
  padding: .2rem 1rem;
  cursor: default;
  user-select: none;
}

• 新增top:0和left:0后，fixed容器的边界会被严格限制在视口范围内，不会被内容撑大溢出，align-content: flex-end配置会正常生效，保证最新通知列始终贴靠右侧30px缩进位置，新列向左排列时也不会超出视口左边界。
• 容器配置pointer-events: none、通知单独配置pointer-events: auto，可以避免大面积的空容器挡住页面其他按钮、元素的点击交互，同时不影响通知本身的点击关闭、悬停暂停计时功能。

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