React布局滚动问题：移除sidebar的overflow:auto后content无法独立滚动

问题描述 #

现有React组件与CSS布局，需求实现content区域可滚动、sidebar区域固定不滚动。当前设置sidebar的overflow: auto时两者可独立滚动，但移除该属性后content会失去滚动能力。

问题原因 #

移除sidebar的overflow: auto后，sidebar会被内部大量内容撑开高度，导致父容器.client-layout-container的高度被拉伸至超出视口。由于父容器设置了overflow: hidden，content区域的高度会跟随被拉伸的父容器，因此无法触发滚动。

解决方案 #

修改sidebar的样式，将overflow: auto替换为overflow: hidden，同时确保content的高度严格匹配父容器高度：

.client-layout-container {
  width: 100%;
  height: 100dvh;
  position: relative;
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 0.2rem;
  overflow: hidden;
}

.sidebar {
  background: green;
  height: 100%;
  overflow: hidden; /* 替换原overflow: auto，阻止内容撑开容器 */
}

.content {
  background: yellow;
  height: 100%; /* 替换min-height为height，确保高度严格匹配父容器 */
  overflow: auto;
}

原理说明 #

• sidebar设置overflow: hidden后，内部超出容器高度的内容会被隐藏，不会拉伸父容器高度，父容器始终保持100dvh的视口高度。
• content设置height: 100%和overflow: auto，当内部内容超出容器高度时，自动出现滚动条。

如果需要sidebar内容完整显示但固定在视口内，也可以用position: sticky方案：

.sidebar {
  background: green;
  height: 100dvh;
  position: sticky;
  top: 0;
}

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