如何阻止div高度随子元素数量增长，实现溢出自动滚动效果

架构老林

2026-10-5

布局示意图

解决方案

问题核心是右侧div的父容器没有明确的高度边界，导致overflow: auto无法触发。结合顶部app bar动态高度的场景，可通过以下两种方案实现：

方案1：Flex纵向视口布局

给包含app bar和内容区的最外层根容器设置flex纵向布局，占满整个视口高度，剩余空间自动分配给内容区，不用写死app bar高度：

/* 先重置全局默认边距，避免视口溢出 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
/* 最外层根容器 */
.root-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
/* 顶部动态app bar，保留原有样式即可，无需固定高度 */
.app-bar {
  /* 你的原有app bar样式 */
}
/* app bar下方的内容容器 */
.content-wrapper {
  flex: 1; /* 占满app bar外的所有剩余视口高度 */
  overflow: hidden;
  display: flex; /* 左右两栏布局 */
}
/* 左侧绿色边框面板 */
.left-panel {
  width: 240px; /* 按需调整宽度，也可设置flex占比 */
  border: 1px solid green;
}
/* 右侧面板 */
.right-panel {
  flex: 1;
  overflow: auto; /* 内容超出时自动出现滚动条 */
}
/* 右侧内部红色边框div，无需额外设置溢出属性 */
.red-inner {
  border: 1px solid red;
}

方案2：Grid布局（写法更简洁）

用grid的行高自动分配能力实现，逻辑和flex方案一致：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.root-container {
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自适应app bar高度，第二行占满剩余空间 */
  height: 100vh;
}
.content-wrapper {
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1fr; /* 左侧固定宽度，右侧占满剩余 */
}
.right-panel {
  overflow: auto;
}