IE+Chrome下fixed定位容器内容过长无法滚动问题

我看了你的问题，核心问题在于fixed定位的嵌套导致滚动失效，加上容器没有设置正确的垂直滚动属性。下面是调整后的CSS代码，只需要修改现有规则即可，不需要改动HTML结构：

#assistant-container {
  position: fixed;
  visibility: hidden;
  font-family: Verdana,arial,helvetica,sans-serif;
  overflow-x: hidden;
  /* 添加垂直滚动，内容超出时自动显示滚动条 */
  overflow-y: auto;
  z-index: 199;
  width: 50%;
  top: 10%;
  max-height: 87%;
  /* 移除height:100vh，避免和max-height冲突导致容器超出视口 */
  right: 0px;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

.message {
  /* 将fixed改为relative，让元素回到父容器的文档流中，父容器滚动能作用到它 */
  position: relative;
  margin-top: 20px;
  right: 20px;
  width: 100%;
  min-width: 210px;
  max-width: 500px;
  background-color:gray;
}

/* 以下原有规则保持不变 */
.assistant.show {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.assistant {
  box-sizing: border-box;
  padding: 15px 20px 15px 20px;
  min-width: 170px;
  max-width: 350px;
  border-radius: 8px;
  background-color: white;
  color: #868687;
  font-size: 12px;
  box-shadow: 2px 2px 8px 3px rgba(160, 160, 160, 0.15);
  margin-bottom: 20px;
  display: inline-block;
  float: right;
  vertical-align: top;
  line-height: 20px;
  transform: translateX(20%);
  opacity: 0;
  visibility: hidden;
  word-break: break-word;
}

关键修改点说明： #

• 给#assistant-container添加overflow-y: auto，当内容高度超过容器设置的max-height时，自动触发垂直滚动条；同时移除height:100vh，避免这个属性和max-height:87%冲突，导致容器超出顶部10%的定位区域。
• 把.message的position: fixed改为position: relative，因为fixed定位的元素会脱离父容器的文档流，父容器的滚动不会影响到它。改成relative后，元素会被包含在#assistant-container内，容器滚动时内容也会跟着滚动。

调整后，当提示内容过长时，右侧的fixed容器就会出现垂直滚动条，用户可以滚动查看底部的所有内容了。

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