如何让高度随父元素动态变化的元素可滚动？

针对你遇到的问题（紫色区域内容溢出父级却不显示滚动条，且无法设置固定像素高度），可以通过Flexbox布局轻松解决，无需硬编码高度：

核心实现思路： #

• 给父容器启用Flex布局并设置垂直方向排列，同时保留max-height限制，让父容器的高度由内容和max-height共同决定。
• 让需要滚动的紫色容器占据父容器的剩余可用空间，再开启垂直溢出滚动。

关键代码调整： #

/* 父容器 */
.parent {
  max-height: 400px; /* 你原有的max-height设置 */
  display: flex;
  flex-direction: column;
}

/* 紫色滚动区域 */
.purple-scroll-area {
  flex: 1; /* 占据父容器剩余空间 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

这样修改后，紫色区域会自动适配父容器的动态高度，当内容超过父容器的max-height限制时，就会触发滚动条，完全不需要依赖固定像素高度。

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