如何实现动态高度元素垂直堆叠：顶部固定+下方自适应滚动

你可以使用CSS Flexbox布局来完美解决这个问题，不需要依赖固定高度计算，让第二个元素自动占据父容器的剩余空间：

核心思路 #

• 给父容器设置Flex布局，垂直排列子元素
• 第一个元素自适应自身内容高度，不设置固定height
• 第二个元素通过*flex: 1*属性自动填充父容器的剩余空间，同时开启垂直滚动

具体实现代码 #

首先确保父容器有明确的高度（比如全屏使用height: 100vh，如果是嵌套容器则设置height: 100%，需保证父级链都有高度设置）：

/* 父容器样式 */
.parent-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 根据实际场景调整，比如100% */
  width: 100%;
  min-width: 300px;
}

/* 第一个元素：自适应内容高度 */
#element-1 {
  width: 100%;
  /* 移除固定height，让高度由内容决定 */
}

/* 第二个元素：占据剩余空间并可滚动 */
#element-2 {
  width: 100%;
  flex: 1; /* 关键属性，自动填充剩余空间 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

为什么这个方案有效 #

• Flex布局会自动分配容器内的空间，flex:1的元素会优先占据除其他子元素以外的所有剩余空间
• 第一个元素的高度完全由自身内容决定，不管是100px还是150px，都不会出现多余空白
• 当第二个元素内容超出剩余空间时，会自动触发垂直滚动，符合需求

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