flex 子元素超出父元素实例

正常来说，当父元素设置为 flex 之后，子元素应该平分父元素的大小。

但是实际情况是，子元素会超出父元素。

描述一下自己遇到的情况

父元素 div{height:100%,display:flex;flex-direction: column;}

子元素 header:{flex: 0 0 60px;}

子元素 main:{flex: 1;}

子元素 footer:{flex: 0 0 80px;}

实际显示情况是 父元素 div 的高度是 822px。header、footer 子元素正常，因为 main 元素内部是需要华东内容的，导致 main 超出了 父元素的高度，实际高度是 1431 px,

解决办法

给子元素 main 添加一个属性 overflow: hidden;

ps: 给子元素 main 添加 height:0 也能达到效果，但是不理解。

经学习，min-height 或者 min-widht 也可以达到目的，建议使用 min 。