React/CSS布局：如何实现侧边栏可滚动且适配视口

要实现大屏下侧边栏内容可滚动且整体布局适配视口，只需调整两处CSS设置即可解决问题：

1. 约束主内容区的高度与溢出行为 #

修改#mainRow的样式，确保它占满头部和底部之外的剩余视口空间，同时防止子元素溢出破坏整体布局：

#mainRow {
  flex: 1; /* 自动填充header和footer之间的剩余空间 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden; /* 限制子元素在容器内，避免撑大页面 */
}

2. 为侧边栏添加滚动属性 #

给#sidebarDiv设置高度继承和垂直滚动，让内容超出时在内部滚动：

#sidebarDiv {
  min-width: 300px;
  height: 100%; /* 继承mainRow的高度，确保高度被约束 */
  overflow-y: auto; /* 内容过多时显示垂直滚动条 */
  box-sizing: border-box; /* 避免边框/内边距额外增加高度 */
}

补充优化（可选） #

你原来给#reactflowDiv设置的min-height: 500px在小屏幕下可能导致页面超出视口，建议改为自适应高度：

#reactflowDiv {
  flex: 3 0 300px;
  min-height: auto;
}

修改后的完整CSS代码 #

html,
body {
  background: #fff;
  padding: 0;
  margin: 0;
}

#app_container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#headerRow {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#headerTitleDiv {
  flex: 1 1 auto;
  text-align: center;
}

#headerInfoDiv {
  flex: 0 0 auto;
  margin: 8px; /* 补充单位，原代码缺少px */
}

#mainRow {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
}

#reactflowDiv {
  flex: 3 0 300px;
  min-height: auto;
}

#sidebarDiv {
  min-width: 300px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

@media only screen and (max-width: 601px) {
  #reactflowDiv {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  #sidebarDiv {
    flex: 1 0 auto;
    height: auto; /* 小屏幕下侧边栏高度自适应内容 */
  }
}

@media only screen and (min-width: 602px) {
  #reactflowDiv {
    border-right-style: solid;
    border-right-width: 1px;
  }
  #sidebarDiv {
    flex: 0 0 300px;
  }
}

#footerRow {
  border-top-style: solid;
  border-top-width: 1px;
}

原理说明 #

原来的overflow-y: auto不生效，是因为侧边栏的高度由自身内容撑开，没有被限制在一个固定高度的容器内。通过让#mainRow占满剩余视口空间，并让侧边栏继承该高度，此时设置overflow-y: auto就能让超出部分在侧边栏内部滚动，而不会撑大整个页面。

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