Html 防止元素溢出容器

我有以下结构，其中

.list

中的名称（

.name

）的数量是动态的。我希望实现的是，当内容（取决于.name的n个）长于

.parent

的固定高度时，两个

.children

都适合

.parent

（继承高度）。空间不足可以通过

.list

获取滚动条（

溢出：自动

）来解决

身高继承对独生子女很有效，但当有两个或两个以上的孩子时，我会遇到巨大的问题

HTML

<div id="grandparent">
  <div id="parent">
    <div id="list" class="children">

      <div class="name">john</div>
      <div class="name">mike</div>
      <div class="name">jack</div>
      <div class="name">terry</div>

    </div>

    <div id="footer" class="children">

      <div>footer</div>

    </div>
  </div>
</div>

另外，很抱歉代码混乱，我刚刚测试了不同的选项。

将此添加到您的代码中：

#parent {
  display: flex;
  flex-direction: column;
}

body，
html{
保证金：0；
宽度：100%；
身高：100%；
}
div{
框大小：边框框；
}
#祖父母{
背景颜色：黄色；
显示器：flex；
对齐项目：居中；
宽度：100%；
身高：100%；
弹性：1；
}
儿童
.儿童组{
填充物：5px；
}
.儿童{
最大高度：继承；
}
.儿童组{
宽度：100%；
最大高度：继承；
}
#名单{
溢出：自动；
填充底部：0；
}
#页脚{
填充顶部：0；
}
.姓名{
背景颜色：绿色；
}
#页脚分区{
背景颜色：粉红色；
}
#母公司{
背景颜色：蓝色；
保证金：0自动；
最大高度：100px；
/*新的*/
显示器：flex；
弯曲方向：立柱；
}

厕所
迈克
杰克
特里
页脚

不确定问题出在哪里。我得到了Chrome和FF上的垂直滚动条。是的，但是第二个子页脚不在父页脚（蓝色div）中，就在这个时候我发现了。谢谢你的帮助：）

#parent {
  display: flex;
  flex-direction: column;
}