如何让.errorMessages元素自适应内容且不超出父容器空间

你需要的自适应高度+滚动限制效果可以通过嵌套flex布局配合最小高度规则实现，具体CSS代码如下：

1. 首先给外层modal容器设置垂直弹性布局，限制整体最大高度：

.modalBox {
  display: flex;
  flex-direction: column;
  /* 可根据需求调整最大高度，示例为不超过视口高度的90% */
  max-height: 90vh;
}

2. 给内容容器设置垂直弹性布局，允许子元素收缩：

.content {
  display: flex;
  flex-direction: column;
  /* 核心规则：解除flex子元素默认的最小高度限制，允许收缩 */
  min-height: 0;
}

3. 给错误信息容器设置自适应高度规则：

.errorMessages.flex {
  /* 可增长、可收缩，基础高度由实际内容决定 */
  flex: 1 1 auto;
  min-height: 0;
  /* 可选：可自定义最小高度下限 */
  min-height: 24px;
}

4. 给内部div设置滚动条规则：

.errorMessages.flex > div {
  height: 100%;
  overflow-y: auto;
}

效果说明 #

• 错误信息较少时，.errorMessages会自动贴合内容高度，无多余空白
• 错误信息较多时，.errorMessages最多占用.content容器的剩余可用空间，内部div自动出现纵向滚动条，整体不会超出父容器的高度限制

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