1. 父元素没有“固定”或“可计算”的高度

• 如果父元素本身没有固定高度（例如，height: 100px）或“可计算”的高度（如 height: calc(100vh - 70px)）等，而是默认 height: auto;，那么它往往会被子元素内容撑开，而不是强制将子元素的高度限制在父元素范围内。
• 提示： Flex 布局中的 “子元素超出” 问题多数情况是因为父元素并没有真正约束高度。如果需要在父容器内部出现滚动而不被撑开，就需要在父容器或某个容器上设定 固定高度 或 可计算的高度 并配合 overflow 属性。

2. 未设置 min-height: 0; 导致子元素继续撑开

• 在 Flex 布局里，默认情况下，子元素的 min-height 并不一定是 0。如果某些子元素没有重置 min-height，或者一些 UI 框架（如 Element UI、Bootstrap 等）里默认给元素加了 min-height，也可能导致子元素不出现滚动，反而把父元素高度继续向下撑开。

• 解决方法： 给相关父容器或者子容器设置 min-height: 0;。例如：

  .parent {
    display: flex;
    flex-direction: column;
    height: 500px; /* 假设一个固定值 */
  }
  
  .child {
    flex: 1;
    min-height: 0; /* 避免默认 min-height 撑开容器 */
    overflow: auto;
  }