父级相对高度div内子级相对高度div滚动失效问题求解

我太懂这个痛点了——想让父容器和子元素都动态适配浏览器尺寸，又不想写死像素值，结果max-height:100%完全不生效，子元素直接溢出父容器对吧？问题根源在于**max-height:100%需要父元素有明确的高度上下文**，如果父元素的高度是由内容撑起来或者依赖视口，单纯给子元素加这个属性根本起不了作用。

下面给你几个纯CSS的完美解决方案，全都是动态适配，不用固定像素：

方案一：Flexbox布局（最推荐，兼容性拉满） #

Flexbox是处理这种动态高度分配的绝佳工具，它会自动帮你计算剩余空间，子元素自动填充并在内容超出时滚动。

/* 父容器样式 */
.parent-gray-layer {
  background-color: #ccc;
  /* 让父容器占满整个视口高度，如果父容器嵌套在其他容器里，就去掉这行让它自适应外层 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* 加box-sizing避免内边距导致父容器溢出 */
  box-sizing: border-box;
  padding: 1rem;
}

/* 滚动子容器样式 */
.scrollable-child {
  flex: 1; /* 强制占满父容器除其他内容外的所有剩余空间 */
  overflow: auto; /* 内容超出时自动显示滚动条 */
  /* 可选：加内边距让文本不贴边 */
  padding: 0.5rem;
}

为什么这个方案管用？ #

Flexbox的flex:1属性会让子元素自动填充父容器的剩余可用空间，不管父容器是占满视口还是自适应外层容器高度。如果父容器里还有其他元素（比如顶部标题），只要给那些元素保留自身内容高度，滚动区会自动挤占剩下的空间，完全不用手动计算。

方案二：Grid布局（更简洁的现代方案） #

如果你喜欢更简洁的代码，Grid布局同样能搞定，原理和Flexbox类似：

.parent-gray-layer {
  background-color: #ccc;
  height: 100vh;
  display: grid;
  box-sizing: border-box;
  padding: 1rem;
}

.scrollable-child {
  overflow: auto;
  padding: 0.5rem;
}

扩展用法 #

如果父容器里有多个子元素（比如顶部导航+滚动区），只需给Grid设置行模板：

.parent-gray-layer {
  grid-template-rows: auto 1fr; /* 导航占自身高度，滚动区占剩余全部空间 */
}

方案三：视口单位+Calc（适合简单场景） #

如果你的父容器直接占满视口，也可以用vh结合calc动态计算子元素的最大高度，不过这个方案需要手动减去父容器的内边距或其他元素高度，灵活性稍差：

.parent-gray-layer {
  background-color: #ccc;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 1rem;
}

.scrollable-child {
  max-height: calc(100vh - 2rem); /* 减去父容器上下内边距的总和 */
  overflow: auto;
  padding: 0.5rem;
}

关键注意事项 #

1. 永远给父元素加上box-sizing: border-box，否则内边距会让父容器的实际高度超出设置范围，导致子元素溢出。
2. 不要给子元素设置height:100%，这会强制子元素占满父容器高度，哪怕内容很少；而flex:1或者Grid的1fr会自动适配内容高度，只有内容超出时才触发滚动。

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