css flex 子元素溢出时，父元素被撑开解决方案

当父元素使用flex: 1;自适应填满时，子元素内容溢出，父元素内容撑大，导致页面显示问题，或设置了overflow 为scroll 的元素没出现滚动条等问题

解决方案：

1.如果是横向排列，flex: 1;的元素加上width: 0; 此时会限制自适应的父元素不会溢出。

2.同上，如果是纵向排列，flex: 1;的元素是高度铺满的，那就加上height: 0; 则元素高度自适应的同事，高度不会被撑大。

3.无论多少层子元素，只要不想给限制的宽高，想让元素flex：1；自适应宽高，都一层层给flex为1时的元素 宽或高 为0限制下去。可以用于解决子元素溢出问题。父元素不会撑大后，给想出现scroll的元素这只滚动，则滚动条恢复正常。

.box{
    display: flex;
}

// 没有给宽度的元素
.aside{}

// 宽度自适应的元素
.main{
    width: 0; // 加上这个，该元素会自适应的同时，不会被main的子元素撑大宽度
    flex: 1;
    overflow-x: scroll;  // 由于不会被撑大，所以可以横向滚动
}



/** 或 */

.box{
    display: flex;
    flex-direction: column;

}

// 没有给高度的元素
.top{}

// 高度自适应的元素
.main{
    height: 0;  // 加上这个，该元素会自适应的同时，不会被main的子元素撑出高度
    flex: 1;
    overflow-y: scroll;  // 由于不会被撑高，所以可以竖向滚动
}