css利用flex分配剩余高度出现子组件溢出问题

1.利用flex分配剩余高度/宽度
情景：父组件高度一定，子组件中，其他子组件高度固定，一个子组件高度不确定（页面滚动列表）

.father{
    display: flex;
   flex-direction: column;
    .son1{
        height: 200px;
    }
    .son2{
      //或  flex-grow: 1;
      flex:1;
    }
}

当子组件的内容超出了容器的高度(父组件)时候，需要使用overflow属性控制溢出（推荐），或是限制子组件的最大高度。
多重嵌套的时候，父组件中也有flex:1，同样需要使用overflow属性控制溢出；

注释：

“flex: 1;” 是一个CSS属性，用于指定弹性容器内弹性项目的伸缩能力和分配比例。它可以接受三个可能的值，分别是：

"flex-grow: 1"：表示项目可以根据需要自动拉伸并占据剩余空间。如果一个项目具有"flex-grow: 1"，而其他项目没有指定该值，那么具有"flex-grow: 1"的项目将占据所有剩余空间。

"flex-shrink: 1"：表示项目可以在空间不足时自动收缩。如果弹性容器的空间不足以容纳所有项目，具有"flex-shrink: 1"的项目将相对于其他具有更高"flex-shrink"值的项目进行收缩。默认情况下，所有项目的"flex-shrink"值为1。

"flex-basis: 0"：表示项目的初始大小为0。这意味着项目将根据容器中的可用空间进行分配，以填充剩余空间。如果没有设置具体的"flex-basis"值，那么默认为0。