为什么.contacts-wrapper区域垂直滚动条不显示，该如何解决？

问题原因 #

.contacts-wrapper 未设置高度限制和溢出滚动规则，内容超出父容器 .right-side 时不会触发滚动，因此滚动条不显示。

解决方案 #

仅需要修改两处CSS规则即可实现效果：

1. 调整 .right-side 样式，添加flex布局规则，避免内容溢出整个侧边栏：

.right-side {
  position: fixed;
  right: 0;
  top: 10vh;
  z-index: 1;
  height: 90vh;
  width: 20%;
  background-color: #f0f2f5;
  /* 新增以下3行 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

2. 调整 .contacts-wrapper 样式，让它自动占满侧边栏剩余高度，超出内容触发滚动：

.contacts-wrapper {
  width: 100%;
  /* 新增以下2行 */
  flex: 1;
  overflow-y: auto;
}

可选优化 #

如果需要让顶部的「Контакти」工具栏固定不滚动，仅滚动联系人列表，可将上述第二步的overflow-y: auto 移动到 .contacts 规则上，同时给 .contacts-wrapper 额外添加display: flex; flex-direction: column;规则即可。

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