CSS自动滚动失效及响应式Div显示异常问题求助

咱们来拆解你遇到的两个核心问题：滚动条不自动显示、响应式视图下内容无法完整展示，核心原因都和flex容器的高度计算、盒模型以及滚动容器的约束有关。

1. 滚动条不显示的原因及修复 #

你的 .sectionContent 是高度为 100vh 的flex容器，且设置了 overflow: hidden。而 .rightSideDiv 作为flex子元素，虽然设置了 min-height: 100% 和 overflow-y: auto，但存在两个潜在问题：

• 盒模型未设置 border-box：padding: 2rem 会被额外计算在元素高度之外，导致 .rightSideDiv 的实际高度超过父容器的 100vh，但父容器的 overflow: hidden 直接截断了超出部分，滚动条无法触发。
• flex子元素的高度约束不明确：min-height: 100% 在flex布局中不如 height: 100% 稳定，因为flex的 align-items: stretch 已经让子元素高度填满容器，但结合padding的影响，滚动容器的可用高度计算会出错。

修复代码： #

/* 全局或针对这几个容器设置盒模型，避免padding/margin影响尺寸计算 */
.sectionContent, .asideContent, .rightSideDiv {
  box-sizing: border-box;
}

.sectionContent {
  height: 100vh;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}

.asideContent {
  flex: none;
  width: 30rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  background: #eceff1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  /* 用height:100%替代min-height，明确高度继承 */
  height: 100%;
}

.rightSideDiv {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2rem;
  /* 同样用height:100%，结合border-box确保高度正确 */
  height: 100%;
}

2. 响应式视图下内容无法完整展示的修复 #

当屏幕宽度小于 .asideContent 的固定宽度 30rem 时，.rightSideDiv 会被挤压到宽度极小甚至负数，导致内容无法正常展示。需要给flex容器添加响应式断点，在小屏幕下调整aside的宽度或者布局方向。

响应式补充代码： #

@media (max-width: 480px) { /* 30rem约等于480px，可根据实际需求调整断点 */
  .sectionContent {
    flex-direction: column;
  }
  
  .asideContent {
    width: 100%;
    height: 20rem; /* 小屏幕下给aside设置固定高度，避免占满整个视口 */
  }
  
  .rightSideDiv {
    height: calc(100vh - 20rem); /* 计算剩余可用高度，确保滚动容器尺寸正确 */
  }
}

额外验证点 #

• 检查 .rightSideDiv 内部是否有元素设置了 position: absolute 或其他脱离文档流的样式，这类元素可能会导致滚动容器无法正确计算内容高度。
• 如果页面存在固定导航栏、页脚等元素，100vh 可能会导致内容被遮挡，此时需要把 .sectionContent 的高度改为 calc(100vh - 导航栏高度 - 页脚高度)。

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