CSS Flex垂直占满100%空间问题：父元素设height:100%且禁滚动

问题背景 #

现有布局中，父元素.app设置了height:100%和overflow:hidden以禁止滚动，滚动功能需要在.content的子元素中实现。常规做法是移除父元素的height:100%来让Flex垂直占满空间，但此处无法修改该属性，需保留父元素禁止滚动的特性。

解决方案（无需修改HTML布局） #

通过调整Flex容器和子元素的属性，让.content在父元素的剩余空间内独立滚动：

• 给.main添加flex: 1，使其占满.app的剩余垂直空间
• 给.content添加flex: 1和min-height: 0：前者让它占满.main的剩余垂直空间，后者解决Flex子元素因内容高度溢出导致的父容器滚动问题

修改后的完整CSS代码 #

html, body, .app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.app {
  display: flex;
  flex: 1 1 auto;
  max-height: 90%;
  max-width: 90%;
}

.sidebar {
  background: green;
  width: 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sidebar .logo {
  flex: 0 0 auto;
  height: 50px;
  display: flex;
  align-items: center;
}
.sidebar .logo > span {
  border: 1px solid #fff;
  border-radius: 50%;
  width: 1em;
}
.sidebar .menu {
  flex: 1 0 auto;
  writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

.main {
  display: flex;
  flex-direction: column;
  background: gray;
  width: 100%;
  flex: 1; /* 新增：让main占满app的剩余垂直空间 */
}
.main .top-bar {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: pink;
}
.main .content {
  display: flex;
  overflow: auto;
  flex: 1; /* 新增：让content占满main的剩余垂直空间 */
  min-height: 0; /* 新增：解决Flex子元素高度溢出导致的父容器滚动问题 */
}
.main .content .left-side {
  flex: 0 0 10em;
  background: orange;
  margin-right: 2em;
}
.main .content .right-side {
  flex: 1 0 auto;
  background: white;
  min-width: 110%;
}

效果说明 #

修改后，.app保持height:100%和overflow:hidden的禁止滚动状态，.content会在分配给它的垂直空间内独立滚动，不会触发整个页面或父元素的滚动。

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