当父元素使用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; // 由于不会被撑高，所以可以竖向滚动 }
